如何使用jQuery創建錯誤消息驗證表單輸入？

Question

我有如下的登記表格：

<div class="form"> 
    <form class="register-form" name="register-form"> 
     <ul class="errorMessages"></ul> 
     <div class="user-name"> 
      <input class="wrap" name="firstname" type="text" placeholder="firstname" required/> 
       <input class="wrap" name="lastname" type="text" placeholder="lastname" required/> 
       </div> 
      <input name="password" type="password" placeholder="password" autocomplete="off" required/> 
      <input name="email" type="text" placeholder="email address" autocomplete="off" required/> 
      button class="btn-signup" type="submit">Create</button> 
      <p class="message">Already registered? <a href="#">Sign In</a></p> 
</div> 

我創建的jQuery代碼檢查，如果輸入的是空白，這將創建錯誤消息」

$(function() { 
    var createAllErrors = function() { 
     var form = $(".register-form"); 
     var errorList = $('ul.errorMessages', form); 

     var showAllErrorMessages = function() { 
      errorList.empty(); 

      form.find(':invalid').each(function (index, node) { 
       var label = $('input').attr('name'); 
       var message = node.validationMessage || 'Invalid value.'; 
       errorList 
        .show() 
        .append('<li><span>' + label + ': ' + '</span>' + message + '</li>'); 
      }); 
     }; 
     $('input[type=submit], button', form).on('click', showAllErrorMessages); 
    }; 
    $('form').each(createAllErrors); 
}); 

但是，當我按下按鈕，我有結果：

約標籤變量的任何問題嗎？或者形式找到無效的輸入？

Answer 1

錯誤在每個循環中。你永遠不會使用當前的索引，而是重新尋找整個dom來尋找input元素。當你在jQuery集合上調用getter函數時，jQuery將返回集合中第一個元素的屬性。在你的情況下，這是firstname輸入元素。改爲使用每個循環的當前元素：

form.find(':invalid').each(function (index, node) { 

    // WRONG: This will always return firstname 
    //var label = $('input').attr('name'); 

    // RIGHT: Access the current element inside each loop 
    var label = $(node).attr('name'); 

    // ... 
}); 

Answer 2

您需要找到「每個」輸入爲「無效」。以下行在您當前的代碼中存在問題。

//this will always find first 'input' element in the DOM! 
    var label = $('input').attr('name'); 

以下應解決您的問題，

$(function() { 
    var createAllErrors = function() { 
     var form = $(".register-form"); 
     var errorList = $('ul.errorMessages', form); 

     var showAllErrorMessages = function() { 
     errorList.empty(); 

     form.find(':invalid').each(function() { 
      // for each invalid input find it's attribute 'name' 
      var label = $(this).attr('name'); 
      var message = $(this).validationMessage || 'Invalid value.'; 
      errorList 
       .show() 
       .append('<li><span>' + label + ': ' + '</span>' + message + '</li>'); 
      }); 
     }; 
     $('input[type=submit], button', form).on('click', showAllErrorMessages); 
    }; 
    $('form').each(createAllErrors); 
});