Question

我想用下面编写的脚本验证我的表单。我试过，但它没有验证..下面是我的代码。任何建议将不胜感激。

<form id="signupForm">
        <table id="control_Table">
            <tr>
                <td style="padding-top: 20px;">
                    <label for="fullname">
                        Full Name</label>
                </td>
                <td>
                    <asp:TextBox ID="txtFullName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    <label for="email">
                        Email Address</label>
                </td>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    <label for="username">
                        User Name</label>
                </td>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:TextBox ID="txtuname" runat="server"></asp:TextBox>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    <label for="password">
                        Password</label>
                </td>
                <td>
                    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    <label for="confirm_password">
                        Confirm Password
                    </label>
                </td>
                <td>
                    <asp:TextBox ID="txtCPwd" runat="server" TextMode="Password"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    Active User
                </td>
                <td>
                    <asp:CheckBox ID="chkActive" runat="server" />
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    Admin User
                </td>
                <td>
                    <asp:CheckBox ID="chkAdmin" runat="server" />
                </td>
            </tr>
            <tr>
                <td style="padding-top: 10px;">
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                </td>
            </tr>
        </table>
    </form>

以下是表单的脚本。

$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    }
});

$(document).ready(function() {
    // validate the comment form when it is submitted
    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            fullname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#MainContent_txtPwd"
            },
            email: {
                required: true,
                email: true
            },
            agree: "required"
        },
        messages: {
            fullname: "Please enter your firstname",
            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
    $("#MainContent_txtuname").focus(function() {
        var firstname = $("#MainContent_txtfullname").val();
        var lastname = $("#lastname").val();
        if (firstname && lastname && !this.value) {}
    });

});

Answer 1

除name属性外，您还必须为输入提供id属性。验证插件和所有规则必须引用name而不是id。

来自validate的rules选项的文档：

定义自定义规则的键/值对。键是元素的名称（或一组复选框/单选按钮），value是一个对象由规则/参数对或普通字符串组成...... [它继续]

Answer 2

查看您的ID。默认情况下，服务器控件ID与ASP.NET中的结果元素ID不匹配。

如果您使用的是.NET Framework 4.0或更高版本，则可以使用ClientIDMode="Static"，或者只是确保在脚本中引用正确的元素ID。

请参阅带有说明here的ClientIDMode枚举。

从jquery插件验证表单。 bassistance.de

2 个答案: