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 Dixit
– Rajesh Dixit, Commented Dec 1, 2015 at 8:20
Possible duplicate of Angularjs prevent form submission when input validation fails — cmrn
– cmrn, Commented Dec 1, 2015 at 8:20
novalidate is to prevent native browser validation and it is correct to use it — fxck
– fxck, Commented Dec 1, 2015 at 8:20
Essentially, you need to check formname.$valid inside your submit handler. — cmrn
– cmrn, Commented Dec 1, 2015 at 8:21

Bilal · Accepted Answer · 2015-12-01 08:35:57Z

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 1, 2015 at 8:35

answered Dec 1, 2015 at 8:22

Bilal

2,6733 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bird87 ZA Over a year ago

Works if I put register.$valid first. Thanks!

Anik Islam Abhi Over a year ago

@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 · Accepted Answer · 2015-12-01 08:25:19Z

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 1, 2015 at 8:25

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

1 Comment

Bird87 ZA Over a year ago

Going to upvote this because it's correct, but question was answered first by @Bilal.

Ray · Accepted Answer · 2015-12-01 08:22:15Z

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 1, 2015 at 8:22

Ray

7774 silver badges11 bronze badges

Collectives™ on Stack Overflow

AngularJS validation on submit

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related