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的表單驗證檢查領域在多個步驟

回答

相關問題