自動完成字段上的jQuery表單驗證

Question

我有一個輸入字段，它使用jQuery自動完成方法。用戶開始鍵入用戶名稱，並獲得結果列表。一旦他選擇了一個結果，會顯示更多的輸入字段，其中包含此用戶的更多詳細信息（在後臺使用AJAX提取數據）。

此外，自動填充字段中的所選用戶名將被複制到隱藏輸入中。我這樣做是因爲我想阻止用戶更改用戶名，而不從建議列表中選擇用戶名。我正在使用jQuery的equalTo驗證來做到這一點。它將可見用戶名輸入字段的值與隱藏用戶名輸入字段的值進行比較。

因此，當用戶現在更改可見用戶名輸入字段的值（只需輸入），就會顯示一條通知，指出他必須從列表中選擇一個名稱。這實際上工作正常。

但是，我有一個奇怪的行爲。用戶打開表單編輯用戶。他開始輸入用戶名，並選擇一個（顯示更多輸入字段+設置隱藏輸入）。但由於某種原因，我收到通知說我必須選擇一個用戶名。只要點擊下一個字段，該錯誤就會消失。很明顯，jQuery在用戶名被選擇後不再檢查輸入。相反，它會等待按鍵或其他表單操作，以重新驗證表單。

有沒有什麼辦法，我可以強制jQuery重新驗證窗體，隱藏輸入設置後？

這是我的（縮短）jQuery代碼：如果

$(document).ready(function() { 
    // Autocomplete 
    $("#username").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "http://localhost/users.php", 
       contentType: "application/json; charset=utf-8", 
       dataType: "jsonp", 
       data: { 
        search: request.term, 
        uid: "ahatius" // This value is generated server side --> It just makes the list smaller by just selecting users relevant to this administrator 
       }, 
       success: function(data) { 
        response($.map(data.persons, function(item) { 
         return { 
          label: item.username + " (ID: " + item.uid + ")", 
          value: item.username, 
          username: item.username, 
          groupnumber: item.groupnumber 
         } 
        })); 
       } 
      }); 
     }, 

     minLength: 0, 

     // Write input values 
     select: function(event, ui) { 
      $("#checkUsername").val(ui.item.username); 
      $("#groupnumber").val(ui.item.groupnumber); 

      showAll(); // This just shows all other input fields, isn't relevant 
     } 
    }) 

    // Validation 
    $("#useredit").validate({ 
     rules: { 
      username: { 
       equalTo: "#checkUsername" 
      }, 
      groupnumber: { 
       required: true, 
       minlength: 2, 
       number: true 
      } 
     }, 
     messages: { 
      cnAntragsteller: { 
       equalTo: "Please select a user from the dropdown!" 
      }, 
      groupnumber: { 
       required: "You need to specify a group number!", 
       minlength: "The specified group number is too short!", 
       number: "You have to specify a numeric value!" 
      } 
     }, 
     errorPlacement: function ($error, $element) { 
      var name = $element.attr("name"); 

      $("#" + name + "Error").append($error); 
     } 
    }) 
}) 

Answer 1

可能不是最漂亮的解決方案，我仍然開放更好的想法，但目前我只是清除錯誤元素的HTML很快用戶被選中。

$("#usernameError").html("")

Answer 2

不能確定它符合您的要求。但是，您可以使用$("#useredit").valid()輕鬆地在需要的情況下重新驗證​​表單。你也可以檢查這個link，看看是否有適合你的房子，比如onkeyup，onfocusout等等。

我想問題是因爲jquery驗證的屬性「onfocusout」默認是true。在選擇用戶名之前觸發onfocustout事件。因此，也許你可以嘗試重寫「onfocusout在」像遵循

$(form).validate({ 
    onfocusout:function(element){ 
     var dovalid ; 
     // Do somethings to determine dovalid is true or false; 
     if (dovalid){ 
      return $(element).valid();  
     } 
     else{ 
      return true; 
     }       
    } 
});