Dependent field in EXT JS - javascript

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.

Related

How does one set custom validation on an Angular form?

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.

Evaluate validity of fields based on action being performed in Angular

I have a complex Angular form representing a printable document. Form has two buttons to submit the form. One is for saving the working version and another to print the completed form to PDF.
The problem is simple, but more difficult to solve for me. Of course, when you are going to save a working version there will be unfilled fields. There are some allways required fields (such as name and personal ID) which are needed to save the form. Other fields are required only for printing. So the validity of these fields depends on the action (the button clicked by the user). I cannot determine the validity when the user is editing the field (angular validators are fired when fields content is changing), because I dont know which button will be clicked. I need to fire the validation of the whole form after one of the buttons was clicked. At that point I already know the action and can evaluate the validity of the fields (I have a custom angular validator to do this job).
My question is: how to trigger the (re)validation of the whole form from a function? If it is not possible, are there any other solutions to implement the validation described above?
I would prefer a solution where the $valid and $invalid properties of the fields are always set properly. My custom validator can ensure this. But how to trigger it on every field from a function? If it is not possible to trigger the validation by one function call, it is possible to iterate over all fields of the form? (to call the $validate() method of NgModelController)

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?

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

Suggestion needed for NON JavaScript version of an input autocomplete

I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?
Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.
If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.
Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.
Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).

Categories

Resources