CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrap
Pracede
Pracede

Reputation: 4361

How to validate a Bootstrap 3 angularJS form?

I have a form with some input type text, input type number, checkbox, radio, a select option and a submit button. I want to validate each input. If a required input is not filled, I want to display a message.

Here's what happened : For my first input, the message appears when I did not select a radio and even when I select.

<div class="form-group has-feedback">
    I am : <br>
    <label class="radio-inline">
        <input type="radio" ng-model="sex" name="sex" id="sex" value="femme"> <strong>Woman</strong>
    </label>
    <label class="radio-inline">
        <input type="radio" ng-model="sex" name="sex" id="sex" value="homme"> <strong>Man</strong>
    </label>

    <div ng-show="form.sex.$error.required">
        <p class="help-block">
            Sex is required
        </p>                        
    </div>
</div>

I miss something it the same for others inputs. I don't see what I am missing ?

Second, I want to disable the submit button when there is an error on a input. This does not work. Here is my code :

<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="form.$invalid" type="submit">Let me know</button>

You can see the complete code on Plunker. Thanks for helping

Upvotes: 1

Views: 1660

Answers (3)

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

You had 2 problems, first the name of your application module was wrong, ("owmuchApp" in the script.js and "myApp" in the index.html) so the application wasn't even loading.

You need set the ng-required field of the radio buttons group this way:

<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="femme"> Woman
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="homme"> Man

Here is the working solution

Update

I forget to mention that i added a new condition on the show message:

<div ng-show="form.sex.$dirty && form.sex.$invalid">
  <p ng-show="form.sex.$error.required" class="help-block">
    Sex is required
  </p>
</div>

Will be shown only when the user tries to submit the form, otherwise the message was been shown soon as the form was rendered.

Upvotes: 2

Yashika Garg
Yashika Garg

Reputation: 2366

Here is the updated plunker http://plnkr.co/edit/ZfUE3uEjklJ2pow46Gs8?p=preview

<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="!myForm.$valid" type="submit">Let me know</button>
  1. use name attribute for all the fields you want to validate.
  2. access error variables using form name. In you case its is "myForm".
  3. You can disable form using the expressions:
    • myForm.$invalid
    • !myForm.$valid
  4. name of your application is not correct in ng-app you have mentioned "myapp" and in script file it is "owmuchApp". I have used "owmuchApp" at both the places

Upvotes: 2

Okazari
Okazari

Reputation: 4597

First of all, your plunker add an error. You where using 

ng-app="myApp"

instead of 

ng-app="owmuchApp".

Your validation worked pretty well. I just added the "required" directive to both radio button and... it worked !

See this plunker working

Upvotes: 2

Related Questions