AngularJS validation on submit

Question

I have a register form that I wish to do validation on the moment a user clicks submit. This is what the HTML looks like:

<form ng-submit="RegistrationC.fireReg()" novalidate name="register">
    <div class="row">
        <div class="col-md-6 form-group">
            <input type="text" autocomplete="off" class="form-control" placeholder="First Name" ng-model="RegistrationC.first_name" required name="first_name">
                    <div class="help-block" ng-messages="register.first_name.$error" ng-show="submitted && register.first_name.$error">
                        <p ng-message="required">This field is required.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 form-group col-md-offset-3">
            <button type="submit" class="btn btn-success btn-block" ng-click="submitted=true">Register Now</button>
        </div>
    </div>
</form>

It is showing the validation message if a username is not typed in, but it still submits. What am I missing?

EDIT 1

//init.js - RegistrationController
reg_list.fireReg = function () {
    var url = 'user/register';
    api.makeCall(reg_list, url)
        .then(function (response) {
            reg_list.response = response;
            console.warn(response);
            $location.path('/user/verify');
        })
        .catch(function (errorMessage) {
            console.log("got an error in initial processing", errorMessage);
            event.restoreButton();
        });
};

I know there's issues in this function, I will fix them at a later stage.

Can you add code of `RegistrationC.fireReg()` as well. Also why is `novalidation` at form? — Rajesh, Dec 01 '15 at 08:20
Possible duplicate of [Angularjs prevent form submission when input validation fails](http://stackoverflow.com/questions/16263158/angularjs-prevent-form-submission-when-input-validation-fails) — cmrn, Dec 01 '15 at 08:20
novalidate is to prevent native browser validation and it is correct to use it — fxck, Dec 01 '15 at 08:20
Essentially, you need to check `formname.$valid` inside your submit handler. — cmrn, Dec 01 '15 at 08:21

Bilal · Accepted Answer · 2015-12-01T08:35:57.590

3

Submit this form only if it is valid. <whatever_form_name>.$valid

<form ng-submit="register.$valid && RegistrationC.fireReg()" novalidate name="register">

edited Dec 01 '15 at 08:35

answered Dec 01 '15 at 08:22

Bilal

2,645
3
28
40

Works if I put `register.$valid` first. Thanks! – Bird87 ZA Dec 01 '15 at 08:28
2

@Bilal nope buddy `&&` condition will execute until it ends or finds false. In your answer first will go to the function and starting to execute the method then it will go for the check of validtion. how come this will stop form being submitted ? – Anik Islam Abhi Dec 01 '15 at 08:32

score 3 · Answer 2 · answered Dec 01 '15 at 08:25

3

Just add checkpoint whether form is valid or not before submitting form

Try like this

<form ng-submit="register.$valid && RegistrationC.fireReg()" novalidate name="register">

answered Dec 01 '15 at 08:25

Anik Islam Abhi

25,137
8
58
80

1

Going to upvote this because it's correct, but question was answered first by @Bilal. – Bird87 ZA Dec 01 '15 at 08:28

score 0 · Answer 3 · answered Dec 01 '15 at 08:22

0

If you want to disable html5(or browser) validator, You have to remove 'required' attribute in your html code

http://www.the-art-of-web.com/html/html5-form-validation/

http://www.w3schools.com/tags/att_input_required.asp

answered Dec 01 '15 at 08:22

Ray

767
4
11

AngularJS validation on submit

3 Answers3