Semantic-ui: [Form Validation] Focus on first invalid field after validation

[kmd1970]

Does the validation api have a setting to focus on the first invalid field?

Currently, when the form is validated no invalid field is focused.

$('.ui.form') .form({ focusInvalid: true });

Can this be done with onFailure?

onFailure: function(formErrors, fields){

});

[kmd1970]

Can we add focus() on first error or scroll to first error (handles hidden selects)?

This example does focus() and/or scroll to first error field. (centers error in window)

https://jsfiddle.net/kmd1970/Ly0gx6bo/

Also, onFailure() callback should include first error field, example (formErrors, fields, firstErrorField) or only include fields that have errors.

[arist0tl3]

For anyone else looking for a solution here:

(This relies on inline errors)

onFailure: function (event, fields) {
        let elem = $('.ui.red.prompt:first').siblings('input');
        $('html, body').animate({scrollTop: $(elem).offset().top -100 }, 'slow', function () {
          $(elem).focus();
        });
      },

[jlukic]

I think it makes sense to add this as a setting.

[dopeboy]

Thanks @arist0tl3 - this is helpful and I'm using it. I noticed it doesn't work on checkbox fields. This is because the input tag is within a div and therefore not a sibling to the inserted prompt. I added this after your let statement to get it working:

if (elem == null || elem.length == 0) {
    elem = $('.ui.red.prompt:first').parent().find('input');
}

[kmd1970]

As of 2.2.8 this can be done with:

onFailure: function(formErrors, fields){
  for (field in fields) {
       if( !$('.ui.form').form('is valid', field) ) {
             let elem = $('.ui.form').form('get field',field)
         let dv = elem.closest('.field');
              $('html, body').animate({ scrollTop: dv.offset().top - $('html, body').offset().top + $('html, body').scrollTop() }, 'slow', function () {
            elem.focus();
               });
         break;
       }
  }
   return false;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[behouba]

This worked well for me (version 2.4.2)

onFailure: function (formErrors, fields) {
            for (field in fields) {
                if (!$('.ui.form').form('is valid', field)) {
                    let elem = $('.ui.form').form('get field', field);
                    let dv = elem.closest('.field');
                    $([document.documentElement, document.body]).animate({
                        scrollTop: dv.offset().top;
                    }, 2000);
                    return false;
                }
            }
            return false;
        }