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