Mandatory Field Validation in Angular JS

Question

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

@Beterraba I cant do it manually as the CMS am using does it automatically when the page is rendered. — Achyut
– Achyut, Commented Jan 23, 2014 at 6:16

Achyut · Accepted Answer · 2014-01-23 12:39:37Z

2

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

answered Jan 23, 2014 at 12:39

Achyut

8183 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Lesh · Accepted Answer · 2014-01-22 15:29:48Z

0

A few things about this:

Are you sure?

Your current code example doesn't actually show the <form> tag.
Have you considered disabling your submit button if the form isn't valid?
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.

answered Jan 22, 2014 at 15:29

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

3 Comments

Achyut Over a year ago

Regarding the <form> tag, i cannot use a form tag because the Content Management System i am using is configured in such a way that i write a piece of HTML code which after uploading gets changed into .aspx with form tag appended dynamically. Regarding disabling of submit button, yes i have thought of doing it but not yet implemented. Event.preventdefault was used just temporarily. I will fix that. Regarding validation problems, i am showing the error meesages on the blur events of respective <input> tags using custom directives.

Achyut Over a year ago

My problem was i cannot show the error messages straight away when the page loads because user has just triggered to open the form and displaying error messages on the form load appears bad option. But again there is a probability that user opens the form and directly clicks on the submit button. So for that i want to trigger error messages tooltips for Required fields

Ben Lesh Over a year ago

You might be able to use ng-form instead of the <form> tag... Not sure about that, I haven't tried it.

Matt Way · Accepted Answer · 2014-01-22 23:18:03Z

-1

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/

edited Jan 22, 2014 at 23:18

answered Jan 22, 2014 at 15:08

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

4 Comments

Matt Way Over a year ago

Any reason for the downvote? This solution works perfectly as per the question.

Achyut Over a year ago

i don't have much reputation to upvote your solution, but it works great on my requirement. Thanks

Achyut Over a year ago

Between can you help me understand few things in your code - 1. What do mean by $ special fields. 2. Why are you setting this value_form[field].$setViewValue(_form[field].$modelValue i mean when the value did not change at all, why to set it again

Matt Way Over a year ago

It is essentially a way of forcing the form fields to perform their validation routines. By setting the form controls using $setViewValue() you induce validation, but by using the $modelValue you aren't technically changing anything. Also by avoiding keys that start with $ you will only be acting on the actual form fields.

Collectives™ on Stack Overflow

Mandatory Field Validation in Angular JS

3 Answers 3

Comments

Are you sure?

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

Other things:

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Are you sure?

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

Other things:

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related