2014-01-13 88 views
2

我想實現Parsley.js表單驗證到一個簡單的形式。這是我的代碼:不能使歐芹觸發器工作

<!DOCTYPE html> 
<meta charset="utf-8"> 
<!-- Load the JS --> 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.2/bootstrap.min.js" type="text/javascript"></script> 
<script src="parsley.js" type="text/javascript"></script> 
<link href="bootstrap.css" rel="stylesheet" /> 
<style> 
body { 
padding-top: 20px; 
padding-bottom: 40px; 
} 
form { 
margin: 0; 
} 
input.parsley-success { 
color: #468847 !important; 
background-color: #DFF0D8 !important; 
border: 1px solid #D6E9C6 !important; 
} 
input.parsley-error { 
color: #B94A48 !important; 
background-color: #F2DEDE !important; 
border: 1px solid #EED3D7 !important; 
} 
input { 
width: 150px; 
margin: 0 2px !important; 
} 
ul.parsley-error-list { 
font-size: 11px; 
margin: 2px; 
list-style-type:none; 
} 
ul.parsley-error-list li { 
line-height: 11px; 
} 
h3 { 
color: #FB4006; 
} 
</style> 
<body> 
<h3>JS Validation: Parsley.js</h3> 
<form parsley-validate> 
<p><input type="text" parsley-type="email" parsley-trigger="keyup" parsley-validation-minlength="0" placeholder="keyup validation trigger" /><p> 
<p><input type="text" parsley-type="email" parsley-trigger="change" parsley-validation-minlength="0" placeholder="change validation trigger" /></p> 
<input type="checkbox" name="mincheckdemo[]" parsley-mincheck="2" value="foo" parsley-trigger="change" /> 
<input type="checkbox" name="mincheckdemo[]" value="bar" /> 
<input type="checkbox" name="mincheckdemo[]" value="baz" /> 
</form> 
</body> 

它幾乎是一樣的「香菜觸發」的例子。但是,我無法使其正常工作,也就是說,輸入一些文本並立即或在聚焦後查看驗證結果。我想知道爲什麼。

非常感謝您的幫助!

回答

0

是否檢查香菜是活動的形式,而且事情已經沒有了問題引用當地parsley.js?也許路徑/位置不是你想象的那樣。

而且,第一輸入字段具有<p>在端部,而不是</p>。編號:Here is a jsfiddle它顯示代碼工作。

編輯2:由於鏈接http://rawgithub.com/guillaumepotier/Parsley.js/master/parsley.js被破壞,小提琴不再起作用。

該溶液是指parsley.js的版本1,目前已被取代由版本2

+0

這不適合我。 – BenjaminRH

0

對於任何人仍然使用歐芹V1 - I通過使用data-type而非parsley-type固定這一點。 的v1 documentation使用parsley-type - 開發不再支持香菜V1。