AngularJS form validation: show error message for checkbox after click on submit

Question

With AngularJS, how can I show an error message for a checkbox after a click on submit button if the checkbox isn't checked?

I tried this :

<form action="/" method="post" name="myForm" novalidate>
    <label>
        <input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
    </label>
    <p class="error" ng-show="myForm.$submitted && myForm.myCheckbox.$error.required">Error message</p>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

But it didn't work. When I click on submit button, nothing is happening. If I remove "novalidate" on form tag or "ng-disabled" on submit button, the form is submitted even if the checkbox is not checked.

Can you help me please ?

are you planning to send the request using angular or do a post directly with the form? — lealceldeiro
– lealceldeiro, Commented Dec 22, 2016 at 16:45
please, see my answer edited. I think you can't validate this as your are doing it right now, since you want to send the post using directly the form. But anyways, I wrote down some variants for you. Hope it helps! :) — lealceldeiro
– lealceldeiro, Commented Dec 22, 2016 at 17:36

lealceldeiro · Accepted Answer · 2016-12-23 14:01:52Z

1

You have ng-disabled="myForm.$invalid" in your submit button, so the submit event never is fired (because the button is disabled when the form is invalid) and thus the condition ng-show="myForm.$submitted && myForm.myCheckbox.$error.required" never is fulfilled because myForm.$submitted is false.

Edit:

As some other users here have suggested, I think your best bet would be if you change the way you are doing things right now. I can think in tow solutions (very similar), but they includes sending the request "the angular way"

Solution 1:

Handle you form submission with angular like this:

Put in your form something like this (note that I deleted the action="/" method="post" part:

<form ng-submit="onSubmit(myForm)" name="myForm" novalidate>

and remove the ng-disabled="myForm.$invalid" from your submit button. Then it would be like this <button type="submit">Submit</button>

... and in the controller

$scope.onSubmit = function(form){
    if(form.$invalid){
        //... do your call to backend here as you like since the call directly from the form was removed
    }
}

Solution 2:

As well change form like this: <form name="myForm" novalidate>

... change your submit button like this: <button type="submit" ng-click="onSubmit(myForm)">Submit</button>

... and use the same function declared in the controller

$scope.onSubmit = function(form){
        if(form.$invalid){
            //... do your call to backend here as you like since the call directly from the form was removed
        }
    }

Otherwise you have to change your condition like this

ng-show="myForm.myCheckbox.$error.required"

but this will show the message before the form is submitted

edited Dec 23, 2016 at 14:01

answered Dec 22, 2016 at 16:17

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

4 Comments

Tom Johnson Over a year ago

You might want to add that he should change the ng-show to just account for the $error.required expression. Otherwise it's a good answer :)

Bdv Over a year ago

That was my guess, thanks. Do you have a solution to this problem?

Bdv Over a year ago

@Tom Johnson: If i change the ng-show as you say, the error message will be visible before I click on submit button.

Bdv Over a year ago

I think it's the best solution! Thanks.

Naghaveer R · Accepted Answer · 2016-12-22 16:35:56Z

0

Remove myForm.$submitted because it is never fulfilled (As Asiel Leal mentioned) and also you have put ng-disabled on submit button, so safe to use.

<form action="/" method="post" name="myForm" novalidate>
    <label>
      <input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required>
    </label>
    <p class="error" ng-show="myForm.$dirty && myForm.myCheckbox.$error.required">Error message</p>
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
  </form>

edited Dec 22, 2016 at 16:35

answered Dec 22, 2016 at 16:28

Naghaveer R

2,9424 gold badges33 silver badges53 bronze badges

4 Comments

Bdv Over a year ago

Thanks, but if I do that, the error message is visible before I click on submit button (I need to show it only after if the checkbox isn't checked).

Naghaveer R Over a year ago

@Bdv I have updated my answer. I have add "myForm.$dirty && myForm.myCheckbox.$error.required" to ng-show.

Bdv Over a year ago

I just tried. Now, the error message appears if I check then uncheck the checkbox, but still not if I click on submit button.

Bdv Over a year ago

I guess "ng-disabled" prevents the "dirty" event

Rohìt Jíndal · Accepted Answer · 2016-12-22 18:13:03Z

Try this working example :

var app = angular.module('myApp',[]);

app.controller('myController',function( $scope ) { 
  $scope.validate = function() {
    alert('submitting..');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="myController">
    <form name="myForm" ng-submit="myForm.$valid && validate()" novalidate>
                <input type="checkbox" name="checkb" ng-model="formData.checkb" required/>
                <span ng-show="submitted == true && myForm.checkb.$error.required">Please select the checkbox to proceed.</span>
        <input type="submit" value="Submit" ng-click="submitted = true"/>
    </form>
</div>

Collectives™ on Stack Overflow

AngularJS form validation: show error message for checkbox after click on submit

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related