JQuery的表单验证检查领域在多个步骤

我有这样的结构：JQuery的表单验证检查领域在多个步骤

<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="[email protected]" class="form-control"> 
      </div> 
    <fieldset class="row row-2"> 
    <fieldset class="row row-3"> 
    <fieldset class="row row-4">

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

我写这IF：

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

但是因为如果领域之一是用一个值它不工作就不能正常工作（的行为就像是一个OR）。有什么不对？

来源

2017-02-20 S.Vento

您应该尝试将每个输入的值分配给变量并调试它们。 – Aarrbee

https://jqueryvalidation.org/ ...对所有的jquery验证使用此....同样的例子在这里https://www.sitepoint.com/basic-jquery-form-validation-tutorial/ –

使用或代替和运营商 – kritikaTalwar

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

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

示例代码：

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

来源

2017-02-20 10:57:39 Janar

如果你想一步你可以走一步干脆这样做。我已经抓获了一些你的投入和创造了一个演示

$(function(){ 
 

 
    $(document).on("click", ".submit_btn", function(e) { 
 
    e.preventDefault(); 
 
    \t 
 
    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 
 
    \t \t  //Built a url to send 
 
      var info = $("#form_id").serialize(); 
 
    \t \t $.ajax({ 
 
    \t \t \t type: "POST", 
 
    \t \t \t url: "action_page.php", //url to send your data 
 
    \t \t \t data: info, 
 
    \t \t \t success: function(result){ 
 
    \t \t \t \t $('#result').html(result); 
 
    \t 
 
    \t \t \t } 
 
    \t \t }); 
 
    \t \t e.preventDefault(); \t 
 
} 
 
}); 
 
});

<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>

来源

2017-02-20 11:31:15

看来，想在提交之前验证表单。

您的选择：（1）使用jQuery验证插件或（2）提高您的验证逻辑

第1种方法：

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

这里的工作fiddle

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

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

来源

2017-02-20 12:35:28

JQuery的表单验证检查领域在多个步骤

回答

相关问题