ng-invalid焦点在输入或选择元素上

时间:2014-03-04 11:19:49

标签: javascript jquery html angularjs

我在angularjs中有输入和选择元素的验证表单。 提交表单时,焦点应跳转到具有类ng-invalid的第一个元素(输入或选择)。 我有代码专注于输入元素,如何添加规则与选择元素... 专注于第一个元素女巫类ng-invalid。如果没有指定输入或选择它将无法工作,因为这个类的第一个元素是。

$('form').submit(function() {
            var invalid = $.find("input.ng-invalid:first");
            $(invalid).focus();
        });

HTML:

<form id="form" method="post" name="form" role="form" novalidate class="form-horizontal"  ng-submit="submitForm()">
<fieldset class="attributes col-md-12" ng-disabled="readOnly" ng-cloak>
    <div class="form-group">
        <label for="select" class="col-sm-wrap-4 control-label">Select:</label>

        <div class="col-sm-6" ng-switch="readOnly">
            <select id="select" name="select" ng-model="form.select" ng-required="true">
            </select>
            <div class="validation-error" ng-show="form.submitted">
                <span ng-show="form.select.$error.required">This field is required</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="input" class="col-sm-wrap-4 control-label">Input:</label>

        <div class="col-sm-6" ng-switch="readOnly">
            <div ng-switch-default="false">
                <input type="text" id="input" name="input" ng-model="input.value"
                class="form-control" ng-required="true"/>

                <div class="validation-error" ng-show="form.submitted">
                    <span ng-show="form.input.$error.required">This field is required</span>
                </div>
            </div>
        </div>
    </div>

    <button type="submit" id="saveButton" class="btn btn-sm btn-primary btn-header" ng-click="update(form)">Save</button>
</fieldset>

1 个答案:

答案 0 :(得分:3)

试试这个选择器:

$("input.ng-invalid, select.ng-invalid, textarea.ng-invalid").eq(0).focus();