How can I disable a form submission anchor when the inputs are invalid?

Question

I have a couple of input text field on which I applied required and pattern and I use an anchor tag with ng-click to save the changes. The styling works well on the UI, when the input value does not meet the requirements the element becomes red. However the user is still able to click on the anchor. I want to be able to do one of 2 things, either disable the anchor when the input elements are not valid or in the saveinfo() function I want to be able to validate the input values without having to repeat the pattern and or required.

Here's what the html looks like:

<input type="text" ng-model="Name" required pattern="[a-zA-Z -]+" />
<input type="text" ng-model="Description" required />
<a ng-click="saveinfo()"><img src="./img/save.svg" /></a>

This might help: http://stackoverflow.com/questions/15300067/disable-submit-button-when-form-invalid-with-angularjs — Jop, Jun 20 '14 at 14:35
Thanks for the tip guys, my problem was that I wasn't wrapping the elements in a form, once I did that I got it to work. Thanks again. — user3760502, Jun 20 '14 at 18:40
Anchors should not be used to submit forms. Use buttons instead. — isherwood, Oct 21 '20 at 14:25

Yashwardhan Pauranik · Answer 1 · 2018-03-07T07:19:55.923

You can make use ng-disabled='formName.$invalid' on the anchor tag like where formName is name of form <form name="formName"></form>

<a ng-disabled='formName.$invalid' ng-click="saveinfo()"><img src="./img/save.svg" /></a>

OR You can check it inside the function as

    $scope.saveinfo= function(isValid) {

       // check to make sure the form is completely valid
      if (isValid) {
        alert('our form is amazing');
      }

    };

<a ng-click="saveinfo(formName.$valid)"><img src="./img/save.svg" /></a>

How can I disable a form submission anchor when the inputs are invalid?

1 Answers1