在多个部分提交之前的jquery验证表单？

Question

我是 jQuery 新手，我正在尝试使用它和验证插件 (https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js) (https://code.jquery.com/jquery-1.11.1.min.js) 为不同的部分创建具有多个部分的单个表单。现在我有它，它有多个部分，“下一步”按钮切换到下一个部分。

我遇到的问题是，当我最终在最后一页上提交时，表单会正确验证，但如果另一页上出现错误，则不会通知用户，并且验证实际上只有在“提交”后才会发生点击。

当我点击“下一步”时，我将如何单独验证每个？我真的不想创建多个表单。 下面是代码。

<form  method="POST" id="myform">
    <section class="container">
        <div class="container">
            <div class="row">
                <div class=""></div>

                <div class="form-group ">
                    <label for="exampleInputEmail2">First Name</label> <input
                        type="text" class="form-control" id="field" name="firstName">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Last Name</label> <input
                        type="text" class="form-control" id="exampleInputEmail2"
                        name="lastName">
                </div>
            </div>
        </div>
    </section>
    <section class="container">
        <div class="container">
            <div class="row">
                <div class="form-group">
                    <label for="exampleInputName2">Email Id</label> <input
                        type="email" class="form-control" id="exampleInputEmail2"
                        name="email">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Phone No</label> <input
                        class="form-control" type="text" name="mobileNumber">
                </div>
            </div>
        </div>
    </section>
</form>

<script>
     $(".button-next-pre")
        .click(
                function() {
                    $("#svg_form_time rect").css("fill", active_color);
                    $("#svg_form_time circle")
                            .css("fill", active_color);
                    var id = $(this).attr("id");
                    if (id == "next") {
                        $("#prev").removeClass("disabled");
                        if (child >= length) {

                            $(this).addClass("disabled");
                            $('#submit').removeClass("disabled");
                        }
                        if (child <= length) {
                            child++;
                        }
                    } else if (id == "prev") {
                        $("#next").removeClass("disabled");
                        $('#submit').addClass("disabled");
                        if (child <= 2) {
                            $(this).addClass("disabled");
                        }
                        if (child > 1) {
                            child--;
                        }
                    }
                    var circle_child = child + 1;
                    $(
                            "#svg_form_time rect:nth-of-type(n + "
                                    + child + ")").css("fill",
                            base_color);
                    $(
                            "#svg_form_time circle:nth-of-type(n + "
                                    + circle_child + ")").css("fill",
                            base_color);
                    var currentSection = $("section:nth-of-type("
                            + child + ")");
                    currentSection.fadeIn();
                    currentSection.css('transform', 'translateX(0)');
                    currentSection.prevAll('section').css('transform',
                            'translateX(-100px)');
                    currentSection.nextAll('section').css('transform',
                            'translateX(100px)');
                    $('section').not(currentSection).hide();
                });
         </script>

    <script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate( {
rules: {
    firstName: {
    required: true,
    normalizer: function( value ) {

        return $.trim( value );
    }
    },
    lastName: {
    required: true,
    normalizer: function( value ) {

        return $.trim( value );
    }
    }
    
}

} );
    .....
</script>

Answer 1

您可以使用下面的代码验证单个元素。

var validator = $( "#myform" ).validate();
validator.element( "#myselect" );

对于文档https://jqueryvalidation.org/Validator.element/

Answer 2

我更改的条件部分有很多问题，您可以通过区分两个函数来了解问题所在。

if (id == "next") {
  console.log("next button is checked");
  console.log("child", child);
  console.log("length", length);
  $("#prev").removeClass("disabled");

  if (child == length) {
    console.log("child", child);
    if (
      $("input[name=radio-group11]:checked").length > 0 &&
      $("input[name=radio-group12]:checked").length > 0 &&
      $("input[name=radio-group13]:checked").length > 0 &&
      $("input[name=radio-group14]:checked").length > 0 &&
      $("input[name=radio-group15]:checked").length > 0
    ) {
      document.getElementById("next").innerHTML = "نتیجه ی نهایی";
      $(this).addClass("disabled");
      $("#submit").removeClass("disabled");
      child++;
      document.getElementById("submit").hidden = true;
      Score_Calculation();
    } else {
      alert("لطفا به تمامی سوالات پاسخ دهید.");
    }
  }
  if (child == length - 1) {
    if (
      $("input[name=radio-group6]:checked").length > 0 &&
      $("input[name=radio-group7]:checked").length > 0 &&
      $("input[name=radio-group8]:checked").length > 0 &&
      $("input[name=radio-group9]:checked").length > 0 &&
      $("input[name=radio-group10]:checked").length > 0
    ) {
      document.getElementById("next").innerHTML = "بعدی";
      child++;
      document.getElementById("next").innerHTML = "نتیجه ی نهایی";
    } else {
      alert("لطفا به تمامی سوالات پاسخ دهید.");
    }
  } else if (child < length) {
    if (child == 2) {
      if (
        $("input[name=radio-group1]:checked").length > 0 &&
        $("input[name=radio-group2]:checked").length > 0 &&
        $("input[name=radio-group3]:checked").length > 0 &&
        $("input[name=radio-group4]:checked").length > 0 &&
        $("input[name=radio-group5]:checked").length > 0
      ) {
        document.getElementById("next").innerHTML = "بعدی";
        child++;
      } else {
        alert("لطفا به تمامی سوالات پاسخ دهید.");
      }
    } else {
      document.getElementById("next").innerHTML = "بعدی";
      child++;
    }
  }
}