CODEWITHSUNDEEP
javascriptjqueryangularjs
Achyut
Achyut

Reputation: 808

Mandatory Field Validation in Angular JS

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'];

Upvotes: 2

Views: 11789

Answers (3)

Achyut
Achyut

Reputation: 808

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

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)">

Upvotes: 2

Matt Way
Matt Way

Reputation: 33171

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.net/HB7LU/1804/

Upvotes: -1

Ben Lesh
Ben Lesh

Reputation: 108491

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 accomplish 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.

Upvotes: 0

Related Questions