In angularjs, how to set focus on input on form submit if input has error?

Question

This is my code and I want to set focus on first name textbox on form submit if first name textbox has error like $error.required,$error.pattern,$error.minlength or $error.maxlength.

<form class="form-horizontal" name="clientForm" id="clientForm" novalidate ng-submit="clientForm.$valid" ng-class="{ loading:form.submitting }">
<div class="form-group">
    <label class="col-lg-2 control-label">First Name</label>
    <div class="col-lg-8">
        <input type="text" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />
        <!--<span ng-show="clientForm.firstName.$dirty && clientForm.firstName.$invalid" class="error">First Name is required.</span>-->
        <div class="errors" ng-show="clientForm.$submitted || clientForm.firstName.$touched">
            <div class="error" ng-show="clientForm.firstName.$error.required">
                First Name is required.
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.pattern">
                Enter valid name.
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.minlength">
                First Name is required to be at least 3 characters
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.maxlength">
                First Name cannot be longer than 100 characters
            </div>
        </div>
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button></form>

Community · Accepted Answer · 2017-05-23 12:00:09Z

7

This question is a duplicate of: Set focus on first invalid input in AngularJs form

You can use a directive on the form:

<form accessible-form>
    ...    
</form>

app.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

Here is a working Plunker: http://plnkr.co/edit/wBFY9ZZRzLuDUi2SyErC?p=preview

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered May 22, 2015 at 6:35

DanEEStar

6,3707 gold badges41 silver badges53 bronze badges

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

Comments

K K · Accepted Answer · 2015-05-22 05:55:44Z

You'll have to handle this using directive. For example:

It will iterate through the element(s) and check if the focusNow attribute is true or not. Make sure that the error handler code sets the expression true/false.

.directive('focusNow', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focusNow, function (value) {
                if (value === true) {
                    for (var i = 0; i < element.length; i++) {
                        var ele = angular.element(element[i].parentNode);
                        if (!ele.hasClass('ng-hide')) { //Skip those elements which are hidden.
                            element[i].focus();
                        }
                    }
                }
            });
        }
    };
});

and in the HTML, you'll have:

<input type="text" focus-now="expression" />

where expression will be a normal expression which will evaluate to true in case of error.

Fahad Khan · Accepted Answer · 2015-05-22 05:57:40Z

0

You can try this: i.e add ng-focus="clientForm.$error" in first name input

<input type="text" ng-focus="clientForm.$invalid" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />

edited May 22, 2015 at 5:57

answered May 22, 2015 at 5:35

Fahad Khan

1,6354 gold badges23 silver badges38 bronze badges

Collectives™ on Stack Overflow

In angularjs, how to set focus on input on form submit if input has error?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related