仅验证表单的可见部分

Question

我一直试图让这工作几天，并且只是在圈子里四处走动，不管我读什么资源。我想我的代码中会有很多错误，但我无法弄清楚。 我有一个表格，我想分解成更小的部分，单击下一个按钮时，它将验证该部分中的所有数据，然后隐藏它并显示下一部分。根据个人是否有伴侣或孩子，我也有部分问题。我不知道如何处理，所以真的很感激一些技巧。

这里是我的验证功能，为全面代码jfiddle低于

$(".next").click(function() { 
$('#travelform').find(":visible").find("input[required]").each(function(){ 
    var myPattern = $(this).attr('pattern'); 
    var myPlaceholder = $(this).attr('placeholder'); 
    var isValid = $(this).val().search(myPattern) >= 0; 
    var isEmpty = true; 

    var abort = false; 
    $("div.error").remove(); 

    //traverse through each required field to ensure it's been filled in 
    $(':input[required]').each(function() { 
     if($(this).val()==='') { 
      $(this).after('<div class="error">This is a required field</div>'); 
      abort = true; 
     } 
    }); 
    if (abort) { return false;} else {return true;} 
}); 

}）;

小提琴：https://jsfiddle.net/gq4kyhs3/

Answer 1

你为什么不添加一个类都已经验证输入和有一个值，然后检查这下按这样每次：

$(".next").click(function() { 
$('#travelform').find(":visible").find("input[required]").each(function(){ 
    var myPattern = $(this).attr('pattern'); 
    var myPlaceholder = $(this).attr('placeholder'); 
    var isValid = $(this).val().search(myPattern) >= 0; 
    var isEmpty = true; 

    var abort = false; 
    $("div.error").remove(); 

    //traverse through each required field to ensure it's been filled in - Added this check in to see if it has already been checked...if not then continue... 

    if ($(this).hasClass('checked-and-filled') { 
     $(':input[required]').each(function() { 
      if($(this).val()==='') { 
       $(this).after('<div class="error">This is a required field</div>'); 
       abort = true; 
      } else { 

      // if the value is not empty then we know its been checked and it has a value 
      addClass('checked-and-filled'); 

      } 
     }); 
     if (abort) { return false;} else {return true;} 
    } 
}); 

也是关于您的HTML的快速评论。我注意到了这一点在你的小提琴，但我想你可能在你的实际代码有这个错误...

上的所有部分的句子你开始一个h3标签，但有h2结束：

<h3 class="center">Part 1 of 5</h2> 

希望这一切帮助:)