2010-10-08 28 views
0

我有以下代碼來執行驗證SubmitForm如下所示,單擊按鈕窗體將被正確驗證它將文本框更改爲紅色並顯示錯誤消息一些symbol.But的問題是如何將我顯示其他符號,例如右打勾標記符號或輸入正確的信息到文本框我用下面的插件進行驗證http://jquery.bassistance.de/validate/jquery.validate.js如何在使用jquery插件進行成功驗證後在文本框旁邊顯示符號

example.html的

用戶的一些短信
<fieldset id="fieldset1"> 
    <legend>Registration Details:</legend> 
    <form id="SubmitForm"> 
     Name of business:<br/> 
     <input size="30" type="text" id="businessname" class="required" name="businessname"/><br/>    
     Zipcode:<br> 
     <input size="30" type="text" id="zipcode" class="required zipcode" name="zipcode"/><br>    
     Telephone:<br/> 
     <input size="30" type="text" id="telephone" class="required phone" name="telephone"/><br/> 
     Email:<br/> 
     <input size="30" type="text" id="email" class="required email" name="email"/> 
</fieldset> 
<br/> 
Your email is your User Name:<br/> 
<input size="30" type="text" id="username" class="required" name="email"/><br/> 
Choose Password:<br/> 
<input size="30" type="text" id="pass" class="required password" class="required" name="password"/><br/> 
Retype Password:<br/> 
<input size="30" type="text" id="pass1" equalTo="#pass"/><br/>    
<input id="Addresslisting" type="image" src="images/Submit.png" align="left" />         
</form> 
</feildset> 

Example.js

$(document).ready(function() { 
    $("#Addresslisting").click(function() { 
     $("#SubmitForm").validate(); 
    }); 
}); 

Example.css

label { 
    width: 10em; 
    float: left; 
} 

label.error { 
    color: red; 
    padding: 8px 200px 0px 0px; 
    vertical-align: top; 
    float: right; 
    background: url("unchecked.gif") no-repeat 120px 0px; 
} 

input.error { 
    border: 1px solid red; 
} 

input.errorlist { 
    margin: 0; 
    color: red; 
    margin-bottom: 10px; 
} 

#fieldset1 { 
    border: 1px solid #1f76c8; 
    width: 500px; 
    margin: 5px; 
    padding: 10px 15px 5px 15px; 
} 

回答

1

,你可以使用這樣的成功,

.validate({   
     success: function(label) { 
      label.text("ok!").addClass("success"); 
      // will add a <label class="success">ok!</label> 
      // I'm assuming, errorElement: "label" 
     }, 
     rules: { 
      number: { 
       required:true, 
       minLength:3, 
       maxLength:15, 
       number:true 
      } 

     } 
    }); 

你可以看到它here

相關問題