CODEWITHSUNDEEP
javascriptjqueryhtml
Praveen M P
Praveen M P

Reputation: 11614

Highlight Input field on clicking of button

I have a signin button in a page. on clicking of this button signin modal will open. It has two fields Email and Password.

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

I want to highlight email field when i click on signin button

      <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>

Upvotes: 1

Views: 3072

Answers (3)

Thulasiram Virupakshi
Thulasiram Virupakshi

Reputation: 187

    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)

Upvotes: 0

Maneesh Singh
Maneesh Singh

Reputation: 575

you can use . 

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

});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337580

You can use the focus() method on an input to automatically place the cursor in it:

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

Upvotes: 3

Related Questions