Form validation on ng-click angularjs

Question

I am unable to find a solution in the existing answers, hence i am posting this.

I have a form which has many input fields, many of them are required.

There are buttons (more than 2) in the form and are tied to functions in controllers using ng-click.

I need to have form validated on ng-click before the function is executed.

By default, form validation is happening after function execution. Function should not run if required fields are not filled.

I have created a fiddle. https://jsfiddle.net/z1uyyqg9/

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name=undefined;
        $scope.preview = function(){
            alert("Previewed");
        };
        $scope.update = function(){
            alert("Updated");
        }
    });
</script>

<div ng-app="myApp" ng-controller="myCtrl">

    <form>
        <input type="text" ng-model='name' required>
        <button ng-click='preview()'>Preview</button>
        <button ng-click='update()'>Update</button>
    </form>

</div>

Not get your point. Did you mean HTML 5 validation on fields ? — Vineet
– Vineet, Commented Jul 1, 2015 at 10:43
Most often in AngularJS you'll find that it is a common pattern to disable the buttons unless the form is valid. So, add a form name and then you can just add: ng-disabled="myFormName.$invalid" to your buttons. — jme11
– jme11, Commented Jul 1, 2015 at 10:49
@jme11 That is one option. But since there can be many input and select fields in the form. I wanted to let user know what he is missing on button click instead of him figuring out what he is missing. — Gautam Kumar
– Gautam Kumar, Commented Jul 1, 2015 at 10:53

Nikos Paraskevopoulos · Accepted Answer · 2015-07-01 10:53:49Z

66

A very-very simple solution is to give the form a name so you can refer to it and then tweak the ng-click to fire only if the form is valid:

<form name="myform">
    <input type="text" ng-model='name' ng-required="true" />
    <button ng-click="myform.$valid && preview()">Preview</button>
    <button ng-click="myform.$valid && update()">Update</button>
</form>

Forked fiddle: https://jsfiddle.net/r8d1uq0L/

I like separating validation (a business concern) from the view, to that end I created egkyron that lets you define the model constraints in code and use programmatic validation along with standard Angular form validation.

answered Jul 1, 2015 at 10:53

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

5 Comments

Gautam Kumar Over a year ago

That is one option. But since there can be many input and select fields in the form, I wanted to let user know what he is missing on button click instead of him figuring out what he is missing and why button is disabled.

Nikos Paraskevopoulos Over a year ago

Display a marker on the invalid fields then? Angular is giving the tools to do it - starting with the ng-invalid CSS class.

Gautam Kumar Over a year ago

Above code doesn't ignore ng-disabled fields. How can i make it ignore ng-disabled fields (even if it has ng-required).

Nikos Paraskevopoulos Over a year ago

You will have to repeat the ng-disabled condition to the ng-required, only negated, as: <input ... ng-disabled="foo.condition" ng-required="!foo.condition" />.

Gautam Kumar Over a year ago

Looks like pain in the back. Thanks for helping :)

jme11 · Accepted Answer · 2015-07-01 12:36:02Z

4

You could set a flag so that you can show some kind of a required message or set some css class when the form is invalid.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name=undefined;
    $scope.showMsgs = false;
    $scope.preview = function(form){
        if ($scope[form].$valid) {
            alert("Previewed");
        } else {
            $scope.showMsgs = true;
        }
    };
    $scope.update = function(form){
        if ($scope[form].$valid) {
            alert("Updated");
        } else {
            $scope.showMsgs = true;
        }    
    };
});

.error {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform" novalidate ng-init="disabled=false">
        <p ng-show="showMsgs && myform.name.$error.required">This field is required</p>
        <input type="text" name="name" ng-model='name' ng-required="!disabled" ng-disabled="disabled" ng-class="{error: showMsgs && myform.name.$error.required}" />
        
        <button ng-click="preview('myform')">Preview</button>
        <button ng-click="update('myform')">Update</button>
        <button ng-click="disabled=!disabled">toggle disabled</button>
    </form>

</div>

edited Jul 1, 2015 at 12:36

answered Jul 1, 2015 at 11:57

jme11

17.9k2 gold badges40 silver badges49 bronze badges

3 Comments

Gautam Kumar Over a year ago

Above code doesn't ignore ng-disabled fields. How can i make it ignore ng-disabled fields (even if it has ng-required=true).

jme11 Over a year ago

Use ng-required on the fields instead of required and set the expression to check if the field is not disabled. Technically, it has nothing to do with the code above. Validation is going to fail if something is required and not filled in regardless if it's disabled or not. Make sense?

jme11 Over a year ago

Updated the example, so you can toggle disabled.

Collectives™ on Stack Overflow

Form validation on ng-click angularjs

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related