MrNew
MrNew

Reputation: 1414

angular form validation for pass confirmation

I'm trying to do a validation in angular using ngMessage and min/maxlength, so the scenario is if min != min then the submit button should be disabled. and if not matched button should be disabled too; only allow to submit the form if all is matched and equal.

Also the ng-show isn't working properly because of the min/maxlenght it won't disappear even the password is matched.

http://jsfiddle.net/tkgfa1qh/

<input required 
                            data-ng-model-options="{debounce: 1000}" 
                            data-ng-model="vm.registerForm.Password" 
                            class="form-control search-input inverted text-box single-line text-box single-line"
                            data-val="true" data-val-required="The password field is required." 
                            id="register-password" 
                            name="password" 
                            placeholder="Password"
                            type="password" 
                            value=""
                            data-ng-minlength="6"
                            data-ng-maxlength="12"/>
                            <span data-ng-show="vm.registerForm.Password !== vm.registerForm.ConfirmPassword" style="color: red;">Password is not matched</span>
                        <div class="mt-10" data-ng-messages="registerForm.password.$error">
                            <!--<p data-ng-message="vm.registerForm.Password !== vm.registerForm.ConfirmPassword">Password is not matched</p>-->
                            <p data-ng-message="minlength">Password is too short (min of 6 characters)</p>
                            <p data-ng-message="maxlength">Password is too long (max of 12 characters)</p>
                        </div>
                    </div>
                    <div class="col-sm-6 ">
                        <label for="register-confirm-password" class="hidden">Confirm Password </label>
                        <input 
                            required 
                            data-ng-model="vm.registerForm.ConfirmPassword" 
                            class="form-control search-input inverted text-box single-line text-box single-line"
                            data-val="true" 
                            data-val-required="The password field is required." 
                            id="register-confirm-password" 
                            name="ConfirmPassword" 
                            placeholder="Confirm Password"
                            type="password" 
                            value=""/>
                    </div>
                </div>

                <div class="form-group clearfix">
                    <div class="col-sm-12">
                        <label for="submitForm" class="hidden">Submit</label>
                        <input 
                            data-ng-disabled="vm.registerForm.Password !== vm.registerForm.ConfirmPassword ? vm.registerForm.Password : disabled || registerForm.$invalid
                            || registerForm.Password.$error.minlength < registerForm.Password.$error.minlength"
                            type="button" 
                            id="submitForm" 
                            data-ng-click="vm.postRegisterForm()" 
                            value="Register" 
                            class="btn-main maxw-200" 
                            data-ng-class="{'orange': registerForm.$valid}">
                    </div>
                </div>

Upvotes: 0

Views: 225

Answers (1)

Arg0n
Arg0n

Reputation: 8423

See this updated JSFIddle where i added ng-app. And included ngMessages.

JavaScript

var app = angular.module("MyApp", ["ngMessages"]);

HTML

<form ng-app="MyApp" action="" name="registerForm">

Upvotes: 0

Related Questions