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>

希望这一切都有帮助：）

仅验证表单的可见部分

1 个答案: