javascript - Mandatory Field Validation in Angular JS - Stack Overflow

admin管理员组

文章数量:1417434

I am trying to submit a blank form, which should trigger the some custom error messages on my mandatory fields. All the validation works perfectly. Only issue arises is when the form 1st time loads and the user directly clicks on the submit button without clicking anywhere in the form. Due to this the Checkbox error message gets displayed but the input tag error message is not displayed. The custom directive emailValidate validates the email address on the blur event with a regex.

Is there any way that i can ng-show the Error message for the input tag on the submit button click alone if it is empty.

Please find my code below -

HTML Code -

    <div ng-controller="NewsletterController" class="overlayContent" id="newsletterOverlayContent" novalidate>

<p>
    <label>Email<span class="mandatory">*</span></label>
    <input type="email" ng-model="user.email" email-validate required name="email" />
    <span class="ui-state-error h5-message" ng-show="_ServerForm.email.$error.emailValidate && _ServerForm.email.$error.required">
        <span class="h5-arrow"></span>
        <span class="h5-content">Error</span>
    </span>
</p>

<p class="align">
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions">
    <span class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">
        <span class="h5-arrow"></span>
        <span class="h5-content">I agree</span>
    </span>
    <span class="checkBoxText">
        <span class="mandatory">*</span>Check the box
    </span>
</p>

<div style="float:right" class="buttonSimple">
    <a name="Register" id="RegisterUser" href="#" class="" ng-click="submitform($event)"><span>Registrieren</span></a>
</div>

Controller.js

    function NewsletterController($scope) {
       $scope.submitform = function ($event) {
       $event.preventDefault();
       $scope.buttonClicked = true;
       }
     }
     NewsletterController.$inject = ['$scope'];

I am trying to submit a blank form, which should trigger the some custom error messages on my mandatory fields. All the validation works perfectly. Only issue arises is when the form 1st time loads and the user directly clicks on the submit button without clicking anywhere in the form. Due to this the Checkbox error message gets displayed but the input tag error message is not displayed. The custom directive emailValidate validates the email address on the blur event with a regex.

Is there any way that i can ng-show the Error message for the input tag on the submit button click alone if it is empty.

Please find my code below -

HTML Code -

    <div ng-controller="NewsletterController" class="overlayContent" id="newsletterOverlayContent" novalidate>

<p>
    <label>Email<span class="mandatory">*</span></label>
    <input type="email" ng-model="user.email" email-validate required name="email" />
    <span class="ui-state-error h5-message" ng-show="_ServerForm.email.$error.emailValidate && _ServerForm.email.$error.required">
        <span class="h5-arrow"></span>
        <span class="h5-content">Error</span>
    </span>
</p>

<p class="align">
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions">
    <span class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">
        <span class="h5-arrow"></span>
        <span class="h5-content">I agree</span>
    </span>
    <span class="checkBoxText">
        <span class="mandatory">*</span>Check the box
    </span>
</p>

<div style="float:right" class="buttonSimple">
    <a name="Register" id="RegisterUser" href="#" class="" ng-click="submitform($event)"><span>Registrieren</span></a>
</div>

Controller.js

    function NewsletterController($scope) {
       $scope.submitform = function ($event) {
       $event.preventDefault();
       $scope.buttonClicked = true;
       }
     }
     NewsletterController.$inject = ['$scope'];

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Jan 22, 2014 at 14:18 AchyutAchyut 80833 gold badges1212 silver badges2828 bronze badges 2

• How about wrap the inputs with a form? – D.Evangelista Commented Jan 22, 2014 at 14:26
• @Beterraba I cant do it manually as the CMS am using does it automatically when the page is rendered. – Achyut Commented Jan 23, 2014 at 6:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

@MWay - I was going through certain best practises and found that using for Loop is Angular JS is not remended.

So the Solution i got to my problem is -

     <span class="ui-state-error h5-message" ng-show="(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (buttonClicked && _ServerForm.email.$invalid)">

A few things about this:

Are you sure?

1. Your current code example doesn't actually show the <form> tag.
2. Have you considered disabling your submit button if the form isn't valid?
3. Why not show validation problems as they're created? Why make the user wait until they think they're ready to submit the form, and then tell them they screwed up? Seems like bad UX to me.

Okay, so you're sure, here's what you do then:

All of that said, you can acplish what you're trying with ng-click and ng-submit working together:

Your view:

<form name="myForm" ng-submit="submitForm()">
  <label>Name <input type="text" name="name" ng-model="name" required/></label>
  <span ng-show="myForm.name.$error.required && buttonClicked">required</span>
  <button ng-click="buttonClicked = true">Submit</button>
</form>

and your controller:

app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';

  $scope.submitForm = function (){
    $window.alert('form submitted!');
  }
});

As well as the gratuitous Plunk

Other things:

If you're using Angular form validation and ng-submit you don't have to worry about $event.preventDefault(). Generally, you're almost never going to need to use $event, which the exception being nested ng-clicks, and even then you can use it directly on the view... but that's a different topic all together.

Likewise, generally, you're almost never going to need to reference your ngModels (stored in your $scope.formNameHere) from your controller. If you are, you might want to investigate whether or not there's a better, reusable way to do whatever you're doing... like a custom validation directive.

I hope that helps.

Use this on submit/click:

var submitValidate = function(_form) {
    for (field in _form) {
        // look at each form input with a name attribute set
        // checking if it is pristine and not a '$' special field
        if (field[0] != '$' && _form[field].$pristine) {
            // set it to the current model value (ie. leaving as is)
            _form[field].$setViewValue(_form[field].$modelValue);
        }
    }   
};

EDIT:

I have now included a working fiddle here that uses the above function to solve your problem. Test it by clicking on the submit button first: http://jsfiddle/HB7LU/1804/

本文标签： javascriptMandatory Field Validation in Angular JSStack Overflow