I'm building an Angular JS app with a 2-step form. It's really just one form, but uses JavaScript to hide the first panel and show the second when the user clicks the 'next' button and moves on to step 2. I have set 'required' validations on some of the fields in step 1, but obviously, they do not get validated when the user clicks the 'next' button...they get validated when the 'submit' button is clicked at the end of step 2.
Is there any way I can tell angular to validate those fields in the form when the 'next' button is clicked?
on('change', function() { $(this). valid(); // force a validation test on this field }); This will force the validation on element before form is submitted and you will get the validation message.
AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not.
AngularJS performs form validation on the client-side. AngularJS monitors the state of the form and input fields (input, text-area, select), and notify the user about the current state. AngularJS also holds information about whether the input fields have been touched, modified, or not.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data. Data Format Validation − Secondly, the data that is entered must be checked for correct form and value.
I suggest to use sub-forms. AngularJS supports putting one form inside another, and validity is propagated form lower form to upper;
Here is example: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview
Here is some code so you can grasp the idea:
<form name='myform' ng-init="step = 1"> <div ng-show="step==1"> <h3>Step 1: Enter some general info</h3> <div ng-form='step1form'> Name: <input ng-model="name" required> </div> <button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button> </div> <div ng-show="step==2"> <h3>Step 2: Final info</h3> <div ng-form="step2form"> Phone: <input ng-model="phone" required> </div> <button ng-click="step = 1">Prev</button> <button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button> </div> <div> Validation status: <div> Whole form valid? {{myform.$valid}} </div> <div> Step1 valid? {{step1form.$valid}} </div> <div> Step2 valid? {{step2form.$valid}} </div> </div> </form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With