Validation Not Working for angularJs application

Question

I am trying to build an angularjs application. I am using ui-router for routing between pages. The issue is that, validation I have done for pages was working fine but it suddenly stopped working (I think after routing was implemented using ui-router). Even the basic html form validation for required fields, email etc are not working. I am really new into the field of angularJs. I have gone through other questions posted here and tried a lot, but all in vain.

This is my login.html

<div ng-app="app" ng-controller="LoginController">
<form name="MyForm">


    <center>

          <img id="u1_img"  src="images\image.png">

    </center>


    <h1 align="center" style="color:#336BFF;">Sammilana</h1>
    <h3 align="center">Connecting People</h3>
    <center>
    <input type="email"  placeholder="Email" ng-model="login.User.email" required> </br></br>
    <input type= "password"  placeholder="Password" ng-model="login.User.password" required>
    </center>




    <center>

    </br>
    <a ui-sref="profile" class="centerBtn" style="text-decoration:none;">Login</a>
    </br></br>
    </center>


    <center>

    <a ui-sref="welcome" style="color:#80bfff;" ng-click="submitMyForm()">Register</a></br>
    <a ui-sref="forgot" style="color:#80bfff;">Forgot Password</a></br>


    </center>
    </form>
    </div> 

SubmitMyForm() is the function written in controller for passing values to database. Can anyone show me where am I going wrong?

Answer 1

Failed validation only prevents form submission. You're not submitting the form, you're just calling a function on the controller.

Try moving ctrl.submitMyForm() to the form tag:

<form name="MyForm" ng-submit="ctrl.submitMyForm()">

Then add a submit button. You can only submit the form via a button, not an anchor tag.

<button type="submit">Submit Form</button>

When you click the "Submit Form" button, you should see validation prompts.

Note, however, this is html5 browser validation taking place, not Angular validation.

Answer 2

Use ng-submit on form

<form name="MyForm" ng-submit="submitMyForm()">

and define submitMyForm in your controller you have mentioned in routing.

Also there is submit button required in form which will submit form otherwise validation won't work.

You can check field validation by

MyForm.:name.$valid

:name is field name there are many validation options like dirty , $valid , $invalid etc.

Also you can use $scope.MyForm.$valid in your function for checking that form is $valid or not