Documentation / Tutorials / Tutorials & How to’s

Scrolling to first error in the larger form during validation

/ Tutorials & How to’s / Scrolling to first error in the larger form during validation

<script type="spa/axn" axn=core.run_script>
//** Scroll to first error **//
var validation_rule={}
validation_rule.order=2;
validation_rule.message='';
validation_rule.attribute='honeypot';
validation_rule.fn=function(o){

if ($('.has-error').length > 0) { 
  $('html, body').animate({scrollTop: $('.form-group.has-error:first').offset().top}, 1000);
    $('.form-group.has-error:first .form-control').focus();
        return false;
  }else{
    return true;
  }
}
spa.validation_rules.push(validation_rule);  
</script>

We start by adding a custom rule, for trapping spam entries.

<input id="honey-pot" name="honey-pot" class="form-control input-md " value="" honeypot="" type="hidden">

Use the 'honeypot' attribute to a hidden form element, It should be the last element in the form, this will do two things

  1. In case of any validation error, it will take the focus to the first element with an error
  2. You can also trap the spam if this hidden field has any value in the backend.

 

Categories
Most Popular

Leave a Reply

Your email address will not be published. Required fields are marked *