jquery - 在 ASP.NET 控件上使用 ajax/jQuery 表单验证

Question

美好的一天

我正在使用带有母版页的 ASP.NET 页面。我想对输入字段()进行实时表单验证。现在我看到的所有图和演示/插件都使用普通的 html 标签。我尝试在我的表单上实现其中一些，但它们不起作用。 (我正在使用一个母版页面和一个普通的 aspx 网页表单...)

更新:用 asp 控件替换密码字段的输入标记时出现问题...

原始输入元素

  <fieldset>
        <legend>Validating a complete form</legend>
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" type="text" />
        </p>
        <p>
            <label for="lastname">Lastname</label>
            <input id="lastname" name="lastname" type="text" />
        </p>
        <p>
            <label for="username">Username</label>
            <input id="username" name="username" type="text" />
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">Confirm password</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email" />
        </p>
        <p>
            <label for="agree">Please agree to our policy</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree" />
        </p>
        <p>
            <label for="newsletter">I'd like to receive the newsletter</label>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
        </p>

        <tr>
            <td class="tdRight"><asp:Label ID="LabelEmail" runat="server" Text="Email Address (to be used as username):"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox name="email" type="email" ID="TextBoxEmail" runat="server" ClientIDMode="Static" TextMode="SingleLine" MaxLength="50"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="tdRight"><asp:Label ID="Label1" runat="server" Text="Postal Address:"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox ID="TextBoxPostal" runat="server" ClientIDMode="Static" TextMode="MultiLine" Rows="4" MaxLength="250"></asp:TextBox></td>
        </tr>

        <tr>
            <td class="tdRight"><asp:Label ID="LabelPassword" runat="server" Text="Password:"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox name="password" type="password" ID="TextBoxPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="tdRight"><asp:Label ID="LabelConfirmPassword" runat="server" Text="Confirm Password:"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox name="confirm_password" type="password" ID="TextBoxConfirmPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
        </tr>

</fieldset>

我想用以下 ASP 控件替换上面的内容

        <tr>
            <td class="tdRight"><asp:Label ID="LabelEmail" runat="server" Text="Email Address (to be used as username):"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox name="email" type="email" ID="TextBoxEmail" runat="server" ClientIDMode="Static" TextMode="SingleLine" MaxLength="50"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="tdRight"><asp:Label ID="Label1" runat="server" Text="Postal Address:"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox ID="TextBoxPostal" runat="server" ClientIDMode="Static" TextMode="MultiLine" Rows="4" MaxLength="250"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="tdRight"><asp:Label ID="LabelPassword" runat="server" Text="Password:"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox name="password" type="password" ID="TextBoxPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
        </tr>
        <tr>
            <td class="tdRight"><asp:Label ID="LabelConfirmPassword" runat="server" Text="Confirm Password:"></asp:Label></td>
            <td class="tdLeft"><asp:TextBox name="confirm_password" type="password" ID="TextBoxConfirmPassword" runat="server" ClientIDMode="Static" TextMode="Password" MaxLength="50"></asp:TextBox></td>
        </tr>

现在一切正常了，除了密码字段？为什么？此外，ID 并不重要，因为验证器在名称和类型字段上工作......

jQuery:

 <script type="text/javascript">
        $.validator.setDefaults({
            submitHandler: function () { alert("submitted!"); }
        });

        $().ready(function () {


            // validate signup form on keyup and submit
            $("form").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    topic: {
                        required: "#newsletter:checked",
                        minlength: 2
                    },
                    agree: "required"
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    username: {
                        required: "Please enter a username",
                        minlength: "Your username must consist of at least 2 characters"
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    confirm_password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                }
            });

            // propose username by combining first- and lastname
            $("#username").focus(function () {
                var firstname = $("#firstname").val();
                var lastname = $("#lastname").val();
                if (firstname && lastname && !this.value) {
                    this.value = firstname + "." + lastname;
                }
            });

            //code to hide topic selection, disable for demo
            var newsletter = $("#newsletter");
            // newsletter topics are optional, hide at first
            var inital = newsletter.is(":checked");
            var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
            var topicInputs = topics.find("input").attr("disabled", !inital);
            // show when newsletter is checked
            newsletter.click(function () {
                topics[this.checked ? "removeClass" : "addClass"]("gray");
                topicInputs.attr("disabled", !this.checked);
            });
        });
    </script>

真实渲染的 HTML(与表单相关)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

    $().ready(function() {


        // validate signup form on keyup and submit
        $("form").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function() {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });

        //code to hide topic selection, disable for demo
        var newsletter = $("#newsletter");
        // newsletter topics are optional, hide at first
        var inital = newsletter.is(":checked");
        var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
        var topicInputs = topics.find("input").attr("disabled", !inital);
        // show when newsletter is checked
        newsletter.click(function() {
            topics[this.checked ? "removeClass" : "addClass"]("gray");
            topicInputs.attr("disabled", !this.checked);
        });
    });
</script>
<form method="get" action="SignupPersonal.aspx" id="aspnetForm"
class="cmxform">
    <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMjk5MTc4MzEPZBYCZg9kFgICBQ9kFgICAQ9kFgICMA8QDxYGHg1EYXRhVGV4dEZpZWxkBQ9FbnVtRGVzY3JpcHRpb24eDkRhdGFWYWx1ZUZpZWxkBQlFbnVtVmFsdWUeC18hRGF0YUJvdW5kZ2QQFQMFRW1haWwlTm90aWZpY2F0aW9uIHZpYSBNb2JpbGUgVGV4dCBNZXNzYWdlcwRCb3RoFQMBMAExATIUKwMDZ2dnZGRksmDjLifKF4+hMs8AhfX/bwcgvt2QqQRuZWngXcH7AGM="
        />
    </div>
    <div class="aspNetHidden">
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdABBfr2cGXQNKgk5u/suiS/eBMBPtPHD3IbRvk+yxeYb2457gKW6aCQ3yNBTG9LyKZ4cubOXF5tOYlsiIBcyrDbyQ4wKHhHIVKN2DCQeFUhf9fWAUCuZOob8WzLZCHNXad+6lH/vCaPfCLoThuEr+9Jzl6wAt6cuJ+L+27/Nrmm6upAz//swWW9Bijj8L66VLU8Xqa57A90pLu4vVlIQKRMNCPMnVTRV7QuT7xghzXApY9g0EIzfFocd5Qmeb8RCzKLnYNu/sHr3w5Hv9l1IOx6mNGOqE5LWQWcaFAwIxNHVtD2pkSrWzz9gkUQepnHOZG7M83cV/FFqhRADq7X7PITxLg4JwtYX8Yw9N8ZivtSz9f1K3117QXOtSn4MTHtKkNBE="
        />
    </div>
    <div id="signupPersonal">
        <table>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelName">Name:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxName" type="text" maxlength="50"
                    id="TextBoxName" name="firstname" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelSurname">Surname:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxSurname" type="text" maxlength="50"
                    id="TextBoxSurname" class="required" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelPin">Preferred Pin:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxPin" type="password" maxlength="10"
                    id="TextBoxPin" class="required" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelConfirmPin">Confirm Pin:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxConfirmPin" type="password"
                    maxlength="10" id="TextBoxConfirmPin" class="required" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelPhoneNo">Home Number:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxPhoneNo" type="text" maxlength="20"
                    id="TextBoxPhoneNo" class="required digits" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelMobileNo">Cell Number:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxMobileNo" type="text" maxlength="20"
                    id="TextBoxMobileNo" class="required digits" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelIDNumber">ID Number:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxIDNumber" type="text" maxlength="20"
                    id="TextBoxIDNumber" class="required digits" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelEmail">Email Address (to be used as username):</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxEmail" maxlength="50" id="TextBoxEmail"
                    name="email" type="email" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_Label1">Postal Address:</span>

                </td>
                <td class="tdLeft">
                    <textarea name="ctl00$ContentPlaceHolder1$TextBoxPostal" rows="4" cols="20"
                    id="TextBoxPostal"></textarea>
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelPassword">Password:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxPassword" maxlength="50"
                    id="TextBoxPassword" name="password" type="password" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelConfirmPassword">Confirm Password:</span>

                </td>
                <td class="tdLeft">
                    <input name="ctl00$ContentPlaceHolder1$TextBoxConfirmPassword" maxlength="50"
                    id="TextBoxConfirmPassword" name="confirm_password" type="password" />
                </td>
            </tr>
            <tr>
                <td class="tdRight"><span id="ctl00_ContentPlaceHolder1_LabelContactMethod">Preferred method of contact:</span>

                </td>
                <td class="tdLeft">
                    <select name="ctl00$ContentPlaceHolder1$DropDownListContactMethod" id="DropDownListContactMethod">
                        <option value="0">Email</option>
                        <option value="1">Notification via Mobile Text Messages</option>
                        <option value="2">Both</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" name="ctl00$ContentPlaceHolder1$ButtonRegister" value="Register"
                    id="ctl00_ContentPlaceHolder1_ButtonRegister" class="register" class="submit"
                    type="submit" />
                </td>
            </tr>
        </table>
    </div>
</form>

Answer 1

除非 id您的<form>不是你想象的那样(查看你渲染的代码来验证这一点)，你的表单验证代码应该可以工作。

代码的工作演示:http://jsfiddle.net/b3QNY/

jQuery:

$(document).ready(function () {

    $('#form1').validate();

});

HTML:

<form id="form1">
    <fieldset>
        <legend>A simple comment form with submit validation and default messages</legend>
        <p>
            <label for="cname">Name</label>
<em>*</em>
            <input id="cname" name="name" size="25" class="required"
            minlength="2" />
        </p>
        <p>
            <label for="cemail">E-Mail</label>
<em>*</em>
            <input id="cemail" name="email" size="25" class="required email"
            />
        </p>
        <p>
            <label for="curl">URL</label>
<em> </em>
            <input id="curl" name="url" size="25" class="url"
            value="" />
        </p>
        <p>
            <label for="comment">Your comment</label>
<em>*</em>
            <textarea id="ccomment" name="comment" cols="22"
            class="required"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </fieldset>
</form>