Jquery驗證多個表單的頁面上的特定窗體

Question

請提供一些建議或建議。 我想驗證一個多形式的網頁，但我不知道如何在jQuery選擇指定形式：

<form id="form_a"> 
    <label>First Name</name><input type="text" class="required"><br> 
    <label>Email</label><input type="text" class="required"> 
<button onclick="validate('form_a')">Submit</button> 
</form> 

<form id="form_b"> 
    <label>Serial No </name><input type="text" class="required"><br> 
    <label>Brand </label><input type="text" class="required"> 
<button onclick="validate('form_b')">Submit</button> 
</form> 

<form id="form_c"> 
    <label>First Name</name><input type="text" class="required"><br> 
    <label>Email</label><input type="text" class="required"> 
<button onclick="validate('form_c')">Submit</button> 
</form> 

<script> 
function validate(whichform) { 

    $(whichform+" .required").each(function(i){ 
     if ($(this).val().indexOf() < 0){ 
     alert("null value detected") 
     $(this).css("border","1px solid red") 
     } 
    }); 

} 
</script> 

Answer 1

在你caase要傳遞的ID的方法，但你沒有使用id選擇，你也將不得不返回從事件處理錯誤，如果你想防止提交表單的

<button onclick="return validate('form_c')">Submit</button> 

所以

function validate(whichform) { 
    var valid = true; 
    // whichform is the id so use id selector here 
    $('#' + whichform + " .required").each(function (i) { 
     if ($(this).val().length == 0) { 
      alert("null value detected") 
      $(this).css("border", "1px solid red") 
      valid = false; 
     } else { 
      $(this).css("border", "") 
     } 
    }); 
    //return the valid state 
    return valid; 
} 

演示：Fiddle

---

但更jQuerish解決方案將是使用jQuery的事件處理程序像

<form id="form_a"> 
    <label>First Name</label> 
    <input type="text" class="required" /> 
    <br/> 
    <label>Email</label> 
    <input type="text" class="required" /> 
    <button>Submit</button> 
</form> 

然後

jQuery(function() { 
    $('form').submit(function() { 
     var valid = true; 
     // whichform is the id so use id selector here 
     $(this).find(".required").each(function (i) { 
      if ($(this).val().length == 0) { 
       alert("null value detected") 
       $(this).css("border", "1px solid red") 
       valid = false; 
      } else { 
       $(this).css("border", "") 
      } 
     }); 
     //return the valid state 
     return valid; 
    }) 
}) 

演示：Fiddle

Answer 2

試試這個。

$(document).ready(function(){ 
    $("button").click(function(e){ 
     e.preventDefault(); 
     $(this).parent().children('.required').each(function(){ 
      if ($(this).val().indexOf() < 0){ 
       alert("null value detected"); 
       $(this).css("border","1px solid red"); 
      } 
     }); 
    }); 
}); 

並從您的html中刪除onclick=""。作爲best practice，儘量避免內聯Javascript。 Fiddle