You are viewing limited content. For full access, please sign in.

Question

Question

Way to validate fields on active page only?

asked on June 19, 2018

I am using the below code to validate fields on a form I am working on

$('.cf-next-btn').click(validate);
    function validate() {
      $('#form1').parsley().validate();

I am using the built in pagination. When I click next the validation works on that page, but when I go to the next page the required fields also show the "Value is required" warning before I have even started with that page. Is there a way to have the validation only work on the active page? I have tried using .cf-page-active to no avail. 

0 0

Replies

replied on June 19, 2018 Show version history

I dealt with a similar issue myself and came up with the following code, which only validates the current page and ignores any hidden fields.

function pageValid(){
    // Target only the active page
    var e = '.cf-page.active';

    // Iterate through all field types to trigger validation
    $.each([' input',' select',' textarea'],function(index,value){
      // Iterate through each visible field
      $(e + value + ':not([readonly]):visible').each(function(index2,value2){
        $(value2).parsley().validate();
      });
    });
  
    if($(e + ' .parsley-errors-list:visible li').length > 0){
        // Place focus on first invalid field
        $(e + ' .parsley-errors-list:visible li').eq(0).closest('.cf-field')
              .find('input,select,textarea').eq(0).focus();
        return false;
    } else {
        return true;
    }
}

I actually add my own navigation buttons and hide the built-in ones. Each time a user clicks my navigation buttons it checks the boolean result of pageValid().

If it returns true, it triggers the built in navigation button.

If it returns false it stays on the current page and places the focus on the first invalid field.

If you have any required fields that are hidden by field rules, the ":visible" portion is really important because otherwise it would hit those even if they were hidden and therefore not required.

 

Some of the validation may have changed in 10.3, but so far it still seems to work as expected on my existing forms.

 

On a side note, I made a feature request at this year's Empower for page-by-page validation because I felt it is something that would really improve the pagination feature.

2 0
replied on April 21, 2020

Hi Jason, 

Would you be able to share how you get the custom HTML buttons to go to the Next tab? I tried this (below) but it does not work.

$(document).ready(function(){
  $('.validbutton').click(pageValid);
  function pageValid(){
    // Target only the active page
    var e = '.cf-page.active';

    // Iterate through all field types to trigger validation
    $.each([' input',' select',' textarea'],function(index,value){
      // Iterate through each visible field
      $(e + value + ':not([readonly]):visible').each(function(index2,value2){
        $(value2).parsley().validate();
      });
    });
  if($(e + ' .parsley-errors-list:visible li').length > 0){
    // Place focus on first invalid field
    $(e + ' .parsley-errors-list:visible li').eq(0).closest('.cf-field')
    .find('input,select,textarea').eq(0).focus();
        return false;
    } else {
      
      return true;
      $('.cf-page.active .cf-next-btn').trigger("click");
      
    }
  }
})

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.