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

Solution

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

Comments

[Matt Way]

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

[Achyut]

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]

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

[Achyut]

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

[Achyut]

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]

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.

[Ben Lesh]

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