validating input field using required and angularjs by clicking button outside of form

Question

Adding "required" to an input field fires validation when the clicked button is within the form. But how do I trigger validation when clicking a button outside the form ?

I have created a plunker here demonstrating the issue: http://plnkr.co/edit/rxWHRxi3w8aJhkpO427c?p=preview

If you do not enter anything in the input field and click the button within form, then the validation is executed. But if you click the button outside the form, nothing happens.

How do I trigger validation when clicking a button outside the form ?

thanks

Thomas

Mukesh Soni · Accepted Answer · 2013-11-27 21:13:32Z

1

Give the form a name, which will then be added as property to $scope object. Say myForm.

<form novalidate name="myForm">

Now in your submit function, you can check for form validity -

$scope.submit=function() {
    if(!$scope.myForm.$valid) {
        $scope.myForm.mytext.$dirty = true;
    }
};

answered Nov 27, 2013 at 21:13

Mukesh Soni

6,6683 gold badges34 silver badges38 bronze badges

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

1 Comment

ThomasD Over a year ago

thanks. It now fires the validation. How do I make it show the validation message ? In the original plunk, it shows a validation error when clicking the button inside the form, but in the updated plunk (based on your answer), it doesn't show the validation error.

eddiec · Accepted Answer · 2013-11-27 20:53:56Z

0

The form is invalid, you can see the class ng-invalid on the form element if you inspect it. Native HTML5 validation will only trigger if you click on the submit button within the form.

answered Nov 27, 2013 at 20:53

eddiec

7,6465 gold badges36 silver badges36 bronze badges

Collectives™ on Stack Overflow

validating input field using required and angularjs by clicking button outside of form

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related