Custom Validation on empty text field

[tpeter1985]

I have a GUI like this:

New Persons

First Name	Last Name
Text field	Text field
Text field	Text field
Text field	Text field

I want to allow submit only if the user leaves a row empty or enters values in both text fields of the row.

I have a custom validation function for each field where I check the model (given via parameter) and return a validation item.
My problem is that the custom validation functions are only called when there are values given in the text fields.
If I fill both fields in a row and clear one field, no custom validation function is called after clearing.

How can i do that?

Can you think of optional custom validation for empty fields?

I'm new to github and angular, I hope it's right to create an issue for that.
I tried a lot of angular validation apis those days but your solution matches my requirements best.

Nice solution, thank you very much

[ghiscoding]

Why don't you make it a required field? Please note that with Angular-Validation you can always add any Validators you want. For example:

<input type="text" name="input1" validation="custom:myCustomValidation($index)|required" />

Also note that you can also add arguments to custom validations.

Happy to hear you like my package, I tried to make it as easy as possible :)

[tpeter1985]

Thank for for your fast answer.

I spent the last two hours in creating a Plunker example because I hope you can help me and I can use your library because it has so much functionality I need (e.g. displaying a validation summary) 😰

The short answer to your question

Why don't you make it a required field?

is:
required for one field depends on data given in another field.

I have a legacy application and make a new one of it with angular.
In my oppinion the legacy application GUI has great user experience for editing existing data and inserting new entries in a single form.
For inserting new entries with just a few clicks, the are already rows for new entries.
If there is no input in those rows, no entries should be created.
But if there is data given in a row, the complete row has to be filled with data.
So the validation for required depends on data given in another field.

In the Plunker example you can see how I use custom validation.
Custom validation would work as needed if the functions would be called on empty fields.

The coolest solution I can think of in my case would be setting a global option so that custom validation functions are called for empty text fields.
Plunker link: http://plnkr.co/edit/d649IWRQVwN4ZPIVNhw3?p=preview

[ghiscoding]

You can use interpolation directly in your validation call, just make it validate if the other field is filled. So basically make it required when other field is filled or else make it empty validator (an empty validator will be skipped).

So in code that would look like this

<input type="text" name="newEmployee_firstName_{{employee.id}}" 
    ng-model="employee.firstName" 
    validation="custom:newEmployeeFirstNameValidation(employee)|{{ employee.lastName != '' ? 'required' : '' }}" 
    class="form-control" />

<input type="text" name="newEmployee_lastName_{{employee.id}}" 
    ng-model="employee.lastName" 
    validation="custom:newEmployeeLastNameValidation(employee)|{{ employee.firstName != '' ? 'required' : '' }}" 
    class="form-control" />

It works in your Plunker demo.

[ghiscoding]

Made your wish come true in latest release v1.4.18, though I haven't fully tested it, it should work so give it a try. So far what I tried, seems to work properly and get called when I use the new attribute or Global Options as you can see below.

I made it possible through 2 ways
1- via an attribute on the element Wiki - (attribute) Validate-On-Empty="true"
2- via a Global Option Wiki - (Global Options) validateOnEmpty: true

I also recreated your Plunker code into my own examples folder for testing purposes, you can see it here \more-examples\customValidationOnEmpty

If that doesn't work correctly or you find some bugs with it, then let me know and I will reopen the issue. Thanks for feedback.

[tpeter1985]

Thank you very much for extending the library so fast.
Validation on empty elements works now (I enabled it via global option).
I updated my Plunker demo with the new features.

Now I noticed that because of the input field dependancy, the validation works when typing values for first name and last name and clearing one of the fields.

But when I do the following, validation as I thought does not work:

1. Open the demo
2. Type first name
3. Submit

I think this is because validation state is set only when entering and leaving a text field and in the given steps I don't enter last name so the validation for this field is never executed.

Do you think this can be solved with your library?

A solution I can think of is making it possible to revalidate all input fields via a service call.
Then all validations could be refreshed via a service call on submit, the messages near the input field can be shown and the validation summary can be shown.

[ghiscoding]

I implemented the feature that you wanted but the rest is yours to code yourself. But it looks like the way you are trying to resolve your problem is wrong though. The reason of why it does a submit is simple, you never make the other field required (when you enter a first name, you never tell the last name that is it required) so of course it will submit.

There is 2 ways to solve your problem:
1- Use interpolation (like I wrote in earlier messages) and it worked great with your demo
2- Use the Angular-Validation service to add the required Validator on last name when first name is filled (or vice versa).

My package of Angular-Validation does a lot of things but it won't do everything for you. Just think about what your problem is and find a solution, I gave you 2 ways of doing it but there's still many other ways. Good luck with your project.