How does one set custom validation on an Angular form? - javascript

I am trying to set custom validation on an input field in an Angular app. The validation cannot be set to a pattern, since it is based on the content of another field (e.i. Passwords must match)
A way to do validation in this case is to check for the fields on form input. However, I want to be able to check for the validity in real time, and be able to use CSS classes such as .ng-dirty and .ng-valid, which come when Angular takes care of validation.
I tried to use $scope.formName.inputName.$setValidity(...), but I am running into issues on that end (StackOverflow question here).
Is there another way in AngularJS to set custom validation?

As mentioned if you check
https://docs.angularjs.org/guide/forms#custom-validation
You'll see you can use directives to create your own custom validations, in the example provided the validation is done whenever you input a character.
If you use your browser to inspect the example (username input field) you'll see the classes (ng-not-empty ng-dirty ng-valid-parse ng-touched ng-valid ng-valid-username) being changed on the fly.
If you had a form these classes would be taken into account to change the form.$valid property to true or false. By default if form.$valid is false then you can't submit it.

I know this doesnt answer to your question but I found a couple of directives that can do that for you:
https://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/
https://github.com/TheSharpieOne/angular-validation-match
Try it out to see if its what you need.

Related

Validity property not being set when input value is set by javascript

So I am using vue.js to build my UI and I am using the html DOM property validity along with rules on my input tags(pattern, minLength, maxLength etc.) It seems like the validity property only gets set if I edit the text box manually. If I programatically assign an invalid value to my variable bound to the input tag with v-model, the validity property is not working as expected. It only works if I actually enter something into the input. I have tried programatically firing off keyup and change events for the input box to try and get it to validate and it is not working. Has anyone encountered this before? I know there are good plugins for validating with vuejs but I would prefer to use the built in HTML5 functionality.
If you want to see code samples reply in comments.

Custom validation in MDL

I'm currently making an HTML registration form that completely relies on AJAX and JavaScript (no libraries please), also using MDL.
My problem is that I want to validate the email and the username real-time, i. e. onBlur the AJAX makes a call to the server asking whether the email and the username are taken. If yes, I want to mark the inputs as invalid and display a textfield error saying what happened. This, however, doesn't seem to be possible using MDL.
What I tried: use customValidity(), but MDL only realises the change after a keydown, so this doesn't work. I also tired assigning the input divs an is-invalid class, but same problem as before.
What I need: override the validity from JS and trigger MDL into realising that the validity changed and should update elements accordingly.
Is this possible?

AngularJS validating outside of a form

I have a more or less complex SPA with ~40 text input fields. Those input elements are not bundled by a <form>, but they are separated into categories. If a user submits, i would like to trigger a validation function.
My first approach was writing two directives, one for string input and one for numeric values, which would add an attribute to every invalid element, then using a validate() function which would look up every input field in order to check whether or not it has said attribute.
I stumbled over multiple issues, including the fact that this was a jQuery like solution to the problem.
How could i accomplish this in a more convenient way?
One of the ways I have been handling form validation when things are not inside of a form is by using ng-pattern. With ng-pattern you can either do direct regex there, or link to an expression to run a set of validations for you.
It would look something like this.
<input type="text" ng-pattern="Put your Regex Here or an Expression">
The angular docs for ng-pattern are pretty sparse, so good luck.
This approach may not be what you are looking for since it evaluates only one input at a time, but I hope this helps.

MVC 3 - Set non-required field to required at the client side

I'm building an MVC 3 application.
Can I set a non-required field to required in the client-side(using JavaScript / jQuery)?
I need it to be dynamically when things change in the page.
UPDATE: I viewed the source code of my page and saw the window.mvcClientValidationMetadata array which validation-rules are pushed into it. Can I use it for my needs?
Thanks
You can do whatever you want on the client side.
You can hookup to the form submit event and in it check if the field has been filled or not and either submit the form or display an error message as needed.
Of course, if JavaScript is turned off or if the user knows enough this field may end up being not filled, so always check on the server side (in addition to Model.IsValid, you can add checks for fields that you have not specifically added the RequiredAttribute to).
Another alternative, if your validation logic is complex, is to override ModelMetadata to provide custom validation.
You can set validation rule like this:
$('element').rules('add',{
required: true
});
And remove it:
$('element').rules('remove', 'required');
Or you can add custom validation method that will require value conditionally. see this: http://docs.jquery.com/Plugins/Validation/Validator/addMethod

Dependent field in EXT JS

Does EXT JS provide a mechanism for dependent fields? E.g. password field should not be active until the login has been entered.
No, there is no buildin way to do this. But you can help yourself while using customValidator or any other event that fit your trigger-needs.
Modify the custom Validator on your username field to activates the disabled password field after the minimum username characters are reached.
Benefit of the customValidator is that it get's triggered while you type.
I know there was a formBind config option in Ext 3.3 and it says there is someting in 4.0 but the docs aren't very good now. It works well with buttons but I've never used them on fields before.
per ExtJS API :
Any component within the FormPanel can be configured with formBind: true. This will cause that component to be automatically disabled when the form is invalid, and enabled when it is valid. This is most commonly used for Button components to prevent submitting the form in an invalid state, but can be used on any component type.

Categories

Resources