How to disable the form submit when input fields are incorrect in angularjs

Question

I have a form where I am checking for incorrect input with ng-pattern and showing error message on incorrect entry.

I want the form submit to be disabled when user tries to submit the form with incorrect values with out using ng-disabled option because required option of html is checking for empty text boxes on clicking submit button. How do I achieve this? Do I have to go for custom directive?

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script>
            angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
            {
                $scope.numOnlyRegex = /^\d{1,6}$/;
            });
        </script>
        <!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>-->
        <title>Registration Form</title>
    </head>
    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-login">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="text-muted">Registration form</h2>
                                <!--onSubmit="return validate()"-->
                                <div ng-app="myApp" ng-controller="numOnlyRegex">
                                    <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate >
                                        First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" placeholder="First Name" required/>
                                        <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
                                        Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-zA-]{3,20}/" required placeholder="Last Name"/>
                                        <span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/>
                                        <p>Password:
                                            <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-minlength="3" ng-model="pwd" required placeholder="Password"/>
                                            <span style="color:red" ng-show="myForm.pwd.$error.minlength">password cannot be less than 3 letters</span><br/>
                                            Confirm Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-minlength="3" ng-model="pwd2" required placeholder="Confirm Password"/><br/>
                                            <span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/>
                                            Gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>Female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>Male <br/><br/>
                                            Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,9}$/" ng-model="mobile" required placeholder="Mobile"/>
                                            <span style="color:red" ng-show="myForm.mobile.$error.pattern">Please enter a valid mobile number</span><br/>
                                            Email:<input type="email" class="form-control input-sm" name="email" ng-pattern="/\S+@\S+\.\S+/" ng-model="email" required placeholder="Email"/>
                                            <span style="color:red" ng-show="myForm.email.$error.pattern">Invalid email address</span><br/>
                                            Address:<textarea class="form-control input-sm" name="address" ng-model="address" required placeholder="Address"></textarea>
                                            <span style="color:red" ng-show="myForm.address.$error.require==true">Address cannot be empty</span><br/>
                                            Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/>
                                            Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/>

                                            City:   <select name="city" class="form-control" ng-model="city" required>
                                                <option value="hyderabad">Hyderabad</option>
                                                <option value="secunderabad">Secunderabad</option>
                                                <option value="delhi">Delhi</option>
                                                <option value="mumbai">Mumbai</option>
                                            </select><br/>
                                            State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/>
                                            Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/>
                                            Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/>
                                            <span style="color:red" ng-show="myForm.pin.$error.pattern">Only six-digit number is allowed</span>
                                            <input type="Submit" class="form-control btn btn-success" value="Submit" />
                                            <!--ng-disabled="myForm.$invalid"-->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>            
    </body>
</html>

@kwan245 because when the user clicks on submit button it is checking for null inputs and when I disable the submit button then how would the user know that he forgot a text box to be entered and end of the form on lets say on third page the button will be disabled and user might be thinking such a crappy form — kittu
– kittu, Commented Jun 15, 2015 at 5:43
so you will want to have [next button] to be disabled based on validation on each page -> before submit button ? — kwangsa
– kwangsa, Commented Jun 15, 2015 at 5:44
again the same scenario as the user will not know why the next button is disabled? — kittu
– kittu, Commented Jun 15, 2015 at 5:46
unless I show a message why the next button will be disabled but I don't want to show a static messages under input boxes telling the user to fill the text-boxes as it might just look ugly with all those messages — kittu
– kittu, Commented Jun 15, 2015 at 5:47

Ben Rondeau · Accepted Answer · 2015-06-15 05:37:21Z

2

This link will help explain how to disable a submit button until a form is valid.

You will need to add ng-disabled="FORMNAME.$invalid" attribute to your <input type="Submit" class="form-control btn btn-success" value="Submit" /> element (replace FORMNAME with the model name for your form data).

That should do it. Comment below with any other issues.

answered Jun 15, 2015 at 5:37

Ben Rondeau

3,0631 gold badge18 silver badges22 bronze badges

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

9 Comments

kittu Over a year ago

I don't want to use ng-disabled as I have mentioned in the question because the submit button is checking for null inputs

kwangsa Over a year ago

so you want to allow null input then why it is listed as required ?

kittu Over a year ago

I don't want null inputs. Think it as a real time form and try it in plunker you will get an idea

Ben Rondeau Over a year ago

ng-disabled="FORMNAME.$invalid" does much more than looking for null inputs. It also checks the type of each element to match the REGEX for that type (such as `type="tel" for telephone #'s).

Ben Rondeau Over a year ago

When I test your custom validations on that plunkr, ng-disabled works as intended. I am lost as to what problem you are running into.

|

Dan · Accepted Answer · 2015-06-15 19:05:25Z

1

You appear to want all fields to be required, but that when users think they're ready for form submission, they are kindly notified if they have forgotten any required fields.

Normally this is achieved with ng-submit and something like:

<span ng-if="myForm.$submitted && myForm.formField.$error.required">Please enter information for 'formField'</span>

Here the users are allowed to click submit, but are then shown a message about the required field.

However, this is only works when no action (action="RegistrationServlet.do") is specified on the form. In your case, you need to intercept form submission. One way to do that is to capture the mouse click event to disable and update the form if there are form errors:

app.controller('MainCtrl', function($scope) {
  $scope.submit = function($event) {
  if ($scope.myForm.$invalid) {
     $scope.myForm.$submitted = true;
     $event.preventDefault();    
  }
}

<form name="myForm" action="action.do" method="Post" novalidate>
  <input type="text" name="formField" ng-model="formField" required><br>
  <span class="error" ng-if="myForm.$submitted && myForm.formField.$error.required">Please fill field above<br></span>
  <button type="submit" ng-click="submit($event)">Submit</button>
</form>

See the plnkr here

answered Jun 15, 2015 at 19:05

Dan

3,07021 silver badges38 bronze badges

2 Comments

kittu Over a year ago

Exactly this is what I want. I hope this works with my form as I have action servlet and also ng-pattern validation inline in tags. Let me try and I will update you if its working. Thanks @p65537

kittu Over a year ago

When I do this, the validation on input fields are not working

kwangsa · Accepted Answer · 2015-06-15 06:41:58Z

0

What you need to do is using ng-Submit so that you can do validation when user click submit.

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

app.controller('numOnlyRegex',function($scope){
 $scope.TestSubmit = function()
 {
   if($scope.myForm.$valid)
   {
     //normal submit
   }
 }

});

Updated base on you plunkr

http://plnkr.co/edit/FypBs8IiHmPKJYrsR1xJ?p=preview

answered Jun 15, 2015 at 6:41

kwangsa

1,71112 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to disable the form submit when input fields are incorrect in angularjs

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related