如何更改有效表單字段的類 - jQuery表單驗證插件

我正在使用bassistance jQuery表單驗證插件。如何更改有效表單字段的類 - jQuery表單驗證插件

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://jquery.bassistance.de/validate/demo/

我與表單字段的表單和設定的規則;

的JavaScript

$(document).ready(function() { 
    $.validator.setDefaults({ 
     submitHandler: function() { 
      alert("submitted!"); 
     } 
    }); 
    var validator = $("#testform").validate({ 
     rules: { 
      field1: "required", 
     }, 
     messages: { 
      field1: "", 
     }, 
     error: function(element) { 
      element.addClass("error"); 
     }, 
     success: function(label) { 
      label.addClass("checked"); 
     } 
    }); 
});

CSS

#testform input{ 
    border: solid 2px black; 
} 
#testform input.error{ 
    border: solid 2px #CC0000; 
} 
#testform input.checked{ 
    border: solid 2px #094AB2; 
}

HTML

<form id="testform" name="testform"> 
<input id="field1" name="field1" type="text" value=""> 
<input id="field2" name="field2" type="text" value=""> 
<input type="submit" value="submit"/> 
</form>

誤差函數工作正常的。但成功函數不會爲輸入類型=文本添加樣式，而是會顯示默認樣式（黑色邊框而不是藍色）。我該如何解決這個問題？

這裏是工作fiddle

來源

2013-03-06 blasteralfred Ψ

你能提供的jsfiddle鏈接 – MIIB 2013-03-06 19:25:18

我加入了小提琴 – 2013-03-06 19:32:04

我可能是錯了，但文檔表演n沒有關於錯誤和成功方法...「錯誤」類的唯一原因是因爲默認情況下，驗證插件添加類「錯誤」在您的代碼中，嘗試將classnam更改爲其他內容，您將看不到任何反應。小提琴：http://jsfiddle.net/CgUqE/1/ – 2013-03-06 19:36:07

更改#testform input.checked到#testform input.valid。我通過提交表單並使用開發人員工具或螢火蟲來檢查課程。只見類名稱變更爲有效，並沒有檢查

這裏有一個Live Demo

來源

2013-03-06 19:36:49 MIIB

的success回調的validate方法通過在標籤爲給定的表單輸入。如果標籤不存在，則創建一個。

您的代碼無法正常工作的原因是因爲您的CSS假定checked類將被添加到實際添加到標籤的輸入中。

驗證方法自動將valid類添加到通過驗證的輸入和不包含驗證的類。除非您計劃執行其他任務，否則可能會刪除特定的回調。

CSS

#testform input.valid{ 
    border: solid 2px #094AB2; 
}

var validator = $("#testform").validate({ 
    rules: { 
     field1: "required", 
    }, 
    messages: { 
     field1: "", 
    } 
});

DEMO

來源

2013-03-06 19:37:10

如何更改有效表單字段的類 - jQuery表單驗證插件

回答

相關問題