Question

我有以下代码来执行下面显示的SubmitForm验证，点击按钮表格将被正确验证它将文本框更改为红色并显示带有某些符号的错误消息。但问题是如何显示其他符号，例如右刻度标记或用户输入正确的详细信息到文本框中的一些文本消息我使用以下插件进行验证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/>
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;
}

Answer 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。

如何使用jquery插件成功验证后在文本框旁边显示符号

1 个答案: