html - how to display a symbol next to the textboxes after sucessfull validation using jquery plugins -


i have following code perform validation of submitform shown below on click of button form validated correctly changes textboxes red color , displays error message symbol.but problem how display other symbol example right tick mark symbol or text message on user entering correct details text boxes using following plugin validation http://jquery.bassistance.de/validate/jquery.validate.js

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/> email 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; }    

you use success this,

    .validate({                   success: function(label) {              label.text("ok!").addclass("success");               // add <label class="success">ok!</label>              // i'm assuming, errorelement: "label"          },         rules: {             number: {                 required:true,                 minlength:3,                 maxlength:15,                 number:true              }          }     }); 

you can see here.


Comments

Popular posts from this blog

ASP.NET/SQL find the element ID and update database -

jquery - appear modal windows bottom -

c++ - Compiling static TagLib 1.6.3 libraries for Windows -