JQuery Form Validation 在多个步骤中检查字段答案

【问题标题】：JQuery Form Validation to check fields in multiple stepsJQuery Form Validation 在多个步骤中检查字段
【发布时间】：2017-07-09 14:08:21
【问题描述】：

我有这个结构：

<form action="/action_page.php" method="get">
     <fieldset class="row row-1 active-slide">
          <div class="form-group">
              <label class="question">Initialen</label>
              <input type="text" name="1" aria-invalid="false" placeholder="J." class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Tussenvoegsel</label>
              <input type="text" name="2" aria-invalid="false" placeholder="Van" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Achternaam</label>
              <input type="text" name="3" aria-invalid="false" placeholder="Pijperzele" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Geslacht</label>
              <div class="radio-inline">
                <label>
                  <input type="radio" name="4" value="Mannelijk"><span>Mannelijk</span>
                </label>
              </div>
              <div class="radio-inline">
                <label>
                  <input type="radio" name="4" value="Vrouwelijk"><span>Vrouwelijk</span>
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="question">Geboortedatum</label>
              <input type="text" name="6" aria-invalid="false" placeholder="DD-MM-YYYY" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Telefoonnummer</label>
              <input type="text" name="7" aria-invalid="false" placeholder="00 0000 000" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">E-mailadres</label>
              <input type="text" name="8" aria-invalid="false" placeholder="name@domain.nl" class="form-control">
            </div>
     <fieldset class="row row-2">
     <fieldset class="row row-3">
     <fieldset class="row row-4">

我需要在点击提交按钮之前检查所有字段是否为空。我创建了多个步骤，我想在每个步骤结束时检查它。

我写了这个如果：

if ($('input[name="1"]').val() == '' && $('input[name="2"]').val() == '' && $('input[name="3"]').val() == ''){
                        alert('complete all');

但它不能正常工作，因为如果其中一个字段带有值，它就不起作用（行为就像 OR）。怎么了？

【问题讨论】：

您应该尝试将每个输入的值分配给变量并调试它们。
jqueryvalidation.org ...将其用于所有 jquery 验证......这里有一个相同的示例sitepoint.com/basic-jquery-form-validation-tutorial
使用 or 代替 and 运算符

标签： jquery html forms validation input

【解决方案1】：

您的 IF 条件无法正常工作，因为您正在检查所有输入是否为空，如果其中一个不是，则不会进入。

您应该使用 OR 而不是 AND - 这样它会检查至少一个输入是否为空

示例代码：

if ($('input[name="1"]').val() == '' || $('input[name="2"]').val() == '' || $('input[name="3"]').val() == ''){
   alert('complete all');
}

【讨论】：

【解决方案2】：

如果您想逐步进行，您可以简单地执行此操作。我已经收集了您的一些输入并创建了一个演示

$(function(){

    $(document).on("click", ".submit_btn", function(e) {
    e.preventDefault();
    	
    var one = $("#one").val();
    var two = $("#two").val();
    var three = $("#three").val();

    if (one==''){alert("Please enter one");}
    else if (two==''){alert("Please enter two");}
    else if (three==''){alert("Please enter three");}
    else {
                alert("You are good to go!");
                //do your thing here e.g send value using ajax
    		    //Built a url to send
          var info = $("#form_id").serialize();
    		  $.ajax({
    			type: "POST",
    			url: "action_page.php", //url to send your data
    			data: info,
    			success: function(result){
    				  $('#result').html(result); 
    	
    			}
    		});
    		e.preventDefault();	
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form action="/action_page.php" id="form_id" method="get">
       <div class="form-group">
        <label class="question">Initialen</label>
        <input id="one" type="text" name="1" aria-invalid="false" placeholder="J." class="form-control">
        </div>
        <div class="form-group">
         <label class="question">Tussenvoegsel</label>
         <input id="two" type="text" name="2" aria-invalid="false" placeholder="Van" class="form-control">
         </div>
         <div class="form-group">
          <label class="question">Achternaam</label>
          <input id="three" type="text" name="3" aria-invalid="false" placeholder="Pijperzele" class="form-control">
         </div>   
         <input class="submit_btn" type="button" value="submit"> 
</form>
<div id="result"></div>

【讨论】：

【解决方案3】：

您似乎想在提交之前验证您的表单。

您的选择： (1) 使用 jquery 验证插件或 (2) 改进您的验证逻辑

第一种方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

这是一个有效的fiddle

注意输入字段中的附加 required 属性

第二种方法（更新验证逻辑）：fiddle

【讨论】：