jQuery驗證插件 - 沒有在Webkit瀏覽器中設置焦點

希望你能幫助..我正在使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/在ASP.NET MVC項目的地址輸入表單上。jQuery驗證插件 - 沒有在Webkit瀏覽器中設置焦點

在我開始執行尋找bug的任務之前，我確實試圖瞭解驗證插件和webkit瀏覽器（例如Safari，Chrome）之間，或者jQuery和webkit瀏覽器之間是否存在某種衝突雖然我已經浪費了幾個小時，毫無進展:(）

我們已經有了包含MVC母版頁，在<頭>部分：

$("#deliveryAddressForm, #paymentForm").validate({ 

    showErrors: function(errorMap, errorList) { 

     if (errorList.length > 0) { 

      var form = errorList[0].element.form; 

      if (form.id == "deliveryAddressForm") { 
       displayErrorMessage("<%= CheckoutController.ERROR_MESSAGE_DELIVERY_ADDRESS %>"); 
      } 
      else if (form.id == "paymentForm") { 
       displayErrorMessage("<%= CheckoutController.ERROR_MESSAGE_ORDER %>"); 
      } 

      $("span.error").remove(); // remove server-side validation error messages 
     } 
     this.defaultShowErrors();  // call overridden showErrors 
    }, 
    onkeyup: function(element) {      // on keyup if form now valid remove banner error message 
     if ($("label.error").length > 0) {   // If some client-side errors currently displayed 
      if ($("#" + element.form.id).valid()) { // validate form, then if no errors remain 
       $("#errorMessage").remove();   // remove banner error message 
      } 
     } 
    } 
});

的displayErrorMessage（）函數看起來像這樣：

function displayErrorMessage(msg) { 
    $("#errorMessage").remove(); 
    $("#userMessages").append('<div id="errorMessage">' + msg + '</div>'); 
}

其中#userMessages是頁面頂部的div，用於將錯誤消息摘要顯示爲橫幅。（例如'您的送貨地址有問題，請更正下面的錯誤'）

除了webkit瀏覽器（例如Safari，Chrome）之外，所有瀏覽器都可以正常使用。

在這些瀏覽器中，驗證插件在執行驗證後應將輸入焦點設置爲頁面上的第一個無效字段。它不會在webkit瀏覽器中執行此操作。例如，在Safari中，粗體藍色框出現在正確的字段周圍，但光標不出現在字段中，並且沒有焦點。

嘗試提交表單失敗後 - 比如電話號碼爲空 - 客戶端錯誤消息按預期顯示。當你開始輸入時，比如電話號碼字段，'onkeyup'代碼調用valid（）（它重新驗證表單，如果有效則返回true）發現它不再無效（空白），應該刪除錯誤消息摘要橫幅（#userMessages）。

儘管所有瀏覽器都正確刪除了橫幅，但在Safari中該字段丟失了焦點，即使該字段中仍然留有厚厚的藍色框。因此，隨後的擊鍵將丟失，您必須再次點擊電話號碼字段才能繼續。

希望你能幫上忙，因爲我不知所措！

在此先感謝

埃德

來源

2009-12-08 edwardsmale

我已經破解了！

我在一個單獨的項目中創建了一個非常基本的骨架表單的測試頁。然後我逐漸將腳本和標記從原始頁面添加到測試頁面，每次在Safari中檢查它。沒有什麼會導致Safari破解，直到我添加了對CSS文件的引用，然後停止工作！

我沒有通過CSS的二元式搜索，直到我把範圍縮小到一個行：

input.error { float: left; color: red; vertical-align: top; text-align: left; }

這種風格是由驗證插件適用於在錯誤輸入字段。

這是打破Safari和Chrome的'float：left'。

對CSS做了一些小改動以擺脫這個，現在它起作用了！似乎有點奇怪，一個浮動：左邊應該會導致這個問題，雖然......

埃德

來源

2009-12-08 13:58:51 edwardsmale

jQuery驗證插件 - 沒有在Webkit瀏覽器中設置焦點

回答

相關問題