Question

我在页面中有一个登录按钮。点击此按钮登录模式将打开。它有两个字段Email和Password。

<a href="#signin" class="btn">Sign In</a>

我想在点击登录按钮时突出显示电子邮件字段

      <form role="form">
                            <div class="form-group">
                                <label for="InputUserName">Email <sup> *</sup></label>
                                <input type="text" class="form-control" id="InputUserName" placeholder="Enter Email">
                            </div>  
                             <div class="row">
                                <div class="col-md-8" style="padding-top:8px">
                                <a href="" class="signup">Sign in</a>
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-ruby-red pull-right">Submit</button>
                                </div>
                            </div>
                            </form>

Answer 1

您可以在输入上使用focus()方法自动将光标放在其中：

$('#signin').click(function() {
    // open modal...
    $('#InputUserName').focus();
});

Answer 2

你可以用。

$('#signin').click(function(){
    $('#InputUserName').focus(function(){
       $(this).css({'border': '2px solid #FF0000'});
  });

}）;

Answer 3

    In Angular 5 , Create Costume Pipe and mentioned below methods

     public static validateAllFormFields(formGroup: FormGroup) {
            Object.keys(formGroup.controls).forEach((field) => {
                const control = formGroup.get(field);
                if (control instanceof FormControl) {
                    control.markAsTouched({ onlySelf: true });
                } else if (control instanceof FormGroup) {
                    this.validateAllFormFields(control);
                }
            });
        }
        public static setFocusOnInvalidFields() {
            const invalidItem = <any>$('.ng-invalid');
            if (invalidItem.length) {
                $('input.ng-invalid')
                    .first()
                    .focus();
            }
        }


    You can use below method to trigger alert message and focus on empty mandatory field, while click on submit button in ts file

         SaveForm(modal) {
            if (this.formName.dirty && this.formName.valid) {
              );
                }
            } else {
                ControlUtils.validateAllFormFields(this.formName);
                ControlUtils.setFocusOnInvalidFields();
                this._alertService.warn('Please fill mandatory fields');
            }
        }



In HTML file following changes to be done

 [formGroup]="formName" and while submit llike (click)=SaveForm(formName.value)

单击按钮时突出显示输入字段

3 个答案: