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?

score 0 · Answer 1 · answered Mar 24 '17 at 05:23

0

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.

answered Mar 24 '17 at 05:23

JC Ford

6,946
3
25
34

I tried.. the validation will work fine with this now..but then routing wont happen..If validation is happening.. then it wont route to other page and vice versa – Urkilashi Mar 24 '17 at 08:05
Just trigger the routing from your controller. Inject `$state` and then call `$state.go('welcome');` at the end of your submit function. – JC Ford Mar 24 '17 at 18:49

score 0 · Answer 2 · answered Mar 24 '17 at 05:43

0

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

answered Mar 24 '17 at 05:43

RITESH ARORA

487
3
11

I tried.. the validation will work fine with this now..but then routing wont happen..If validation is happening.. then it wont route to other page and vice versa – Urkilashi Mar 24 '17 at 08:04
angular provide $state , just inject and use $state.go(":statename"). – RITESH ARORA Mar 24 '17 at 08:30
take reference from this http://stackoverflow.com/questions/19516771/how-to-send-and-retrieve-parameters-using-state-go-toparams-and-stateparams – RITESH ARORA Mar 24 '17 at 08:31

Validation Not Working for angularJs application

2 Answers2