Dinesh Kumar Dinesh Kumar - 5 days ago 7
AngularJS Question

On submit ignore required field validation

I am using ng-message for validation. when I click on forgot PIN its validation both field but I want only account number field. But when I click on "LOGIN TO PAYBACK AND REDEEM" it should validate both.

my form is like this

<form class="row" ng-if="!$ctrl.paybackLoggedin" name="paybackForm" novalidate>
<div class="col-sm-8 col-md-5">
<div class="form-group" ng-class='{ "has-success" : paybackForm.paybackalias.$valid, "has-error": paybackForm.paybackalias.$invalid && (paybackForm.$submitted || paybackForm.paybackalias.$dirty), "is-empty": !paybackForm.paybackalias.$viewValue }'>
<input class="form-control" name="paybackalias" pattern="\d{10}|\d{16}" ng-model="$ctrl.paybackAlias" placeholder="Mobile Number / Payback Card Number" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-minlength="10" ng-maxlength="16" required>
<div ng-show="paybackForm.paybackalias.$invalid && !paybackForm.paybackalias.$pristine" ng-messages="paybackForm.paybackalias.$error" class="help-block">
<span ng-message="required">This field is required</span>
<span ng-message="maxlength || minlength">Enter a valid Phone number or Payback account</span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="form-group" ng-class='{ "has-success" : paybackForm.paybackpin.$valid, "has-error": paybackForm.paybackpin.$invalid && (paybackForm.$submitted || paybackForm.paybackpin.$dirty), "is-empty": !paybackForm.paybackpin.$viewValue }'>
<input class="form-control" name="paybackpin" ng-model="$ctrl.paybackPin" placeholder="Payback PIN" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-minlength="4" ng-maxlength="4" required>
<div ng-show="paybackForm.paybackpin.$invalid && !paybackForm.paybackpin.$pristine" ng-messages="paybackForm.paybackpin.$error" class="help-block">
<span ng-message="required">This field is required</span>
<span ng-message="maxlength || minlength">Enter a valid PIN number</span>
</div>
<small class="help-block text-right"><button class="btn-link-default" ng-click="paybackForm.paybackalias.$valid && $ctrl.paybackForgotPass()">Forgot PIN</button></small>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<button class="btn btn-block btn-default" ng-click="paybackForm.$valid && $ctrl.paybackLogin()">LOGIN TO PAYBACK AND REDEEM</button>
</div>
</div>
</form>

Answer

Since you are using the client side validation on the html you cant pick and choose what will validate, in you'r case i'l suggest to do the validation on you'r on in the submit function for example,

Comments