javascript - JQuery 不验证表单

Question

当我点击提交按钮时，我尝试验证表单。 但它只是继续将表单中输入的数据发布到后续页面，就像验证根本不存在一样。

这是验证码

<script>
$(document).ready(function() {
    $("#regForm").validate({

        errorLabelContainer: $("#ErrorBox"). wrapper: "li",
        rules: {
            fullname: {
                required: true,
                minlength: "2"
            },
            email:{
                required: true,
                email: true
            },
            address: {
                required: true
            },

            contact_no: {
                required: true,
                digits: true,
                minlength: "7"
            },
            username: {
                required: true
            },
            password: {
                required: true
            },
            confirmPassword: {
                required: true,
                equalto: "#password"
            }
        },
        messages: {
          fullname: {
              required: "Please enter your name",
              minlength: "Your name must consist of at least 2 characters"
          },
          email: {
              required: "Please enter your email",
              email: "Please enter a recodnisable email format"
          },
          address: {
              required: "Please enter your address"
          },

          contact_no: {
              required: "Please enter your contact number",
              digit: "Please enter in digits",
              minlength: "Please enter a minimum of 7"

          },
          username: {
              required: "Please enter your username"
          },
          password: {
              required: "Please enter a valid password"
          },
          confirmPassword: {
              required: "Please enter the password again",
              equalto: "Please enter a matching password"
          }
        }
    });
});

这是表格

<form class="cmxform" id="regForm" action="DoRegister.php" method="post">
        <fieldset style="width:270px;">
            <table>
                <tr>
                    <td class="col-right-align"><label><b>Full Name:</b></label></td>
                    <td><input type="text" name="fullname" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Email:</b></label></td>
                    <td><input type="text" name="email" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Address:</b></label></td>
                    <td><input type="text" name="address" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Date of Birth:</b></label></td>
                    <td><input type="date" name="dob" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Contact No:</b></label></td>
                    <td><input type="text" name="contact_no" /></td>
                </tr>

                <tr>
                    <td colspan="2"><hr /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Username:</b></label></td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Password:</b></label></td>
                    <td><input type="password" name="password" id="password" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Confirm Password:</b></label></td>
                    <td><input type="password" name="confirmPassword" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"></td>
                    <td><input type="submit" value="submit" name="submit"/></td>
                </tr>
            </table>
        </fieldset>
    </form>
<div><u1 style="color:red;" id="ErrorBox"></u1></div>

Answer 1

代码中存在一些错误，例如缺少逗号和 $document 而不是 @tushar 提到的 $(document)。

我修复了这些问题并为其创建了 jsfiddle，请参阅链接

http://jsfiddle.net/jigardafda/bb1j3ktp/1/

<form class="cmxform" id="regForm" action="DoRegister.php" method="post">
        <fieldset style="width:270px;">
            <table>
                <tr>
                    <td class="col-right-align"><label><b>Full Name:</b></label></td>
                    <td><input type="text" name="fullname" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Email:</b></label></td>
                    <td><input type="text" name="email" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Address:</b></label></td>
                    <td><input type="text" name="address" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Date of Birth:</b></label></td>
                    <td><input type="date" name="dob" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Contact No:</b></label></td>
                    <td><input type="text" name="contact_no" /></td>
                </tr>

                <tr>
                    <td colspan="2"><hr /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Username:</b></label></td>
                    <td><input type="text" name="username" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Password:</b></label></td>
                    <td><input type="password" name="password" id="password" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"><label><b>Confirm Password:</b></label></td>
                    <td><input type="password" name="confirmPassword" /></td>
                </tr>
                <tr>
                    <td class="col-right-align"></td>
                    <td><input type="submit" value="submit" name="submit"/></td>
                </tr>
            </table>
        </fieldset>
    </form>
<div>
<u1 style="color:red;" id="ErrorBox"></u1></div>

JS

$(document).ready(function() {
    $("#regForm").validate({
        errorLabelContainer: $("#ErrorBox"),
        wrapper: "li",
        rules: {
            fullname: {
                required: true,
                minlength: "2"
            },
            email:{
                required: true,
                email: true
            },
            address: {
                required: true
            },

            contact_no: {
                required: true,
                digits: true,
                minlength: "7"
            },
            username: {
                required: true
            },
            password: {
                required: true
            },
            confirmPassword: {
                required: true,
                equalto: "#password"
            }
        },
        messages: {
          fullname: {
              required: "Please enter your name",
              minlength: "Your name must consist of at least 2 characters"
          },
          email: {
              required: "Please enter your email",
              email: "Please enter a recodnisable email format"
          },
          address: {
              required: "Please enter your address"
          },

          contact_no: {
              required: "Please enter your contact number",
              digit: "Please enter in digits",
              minlength: "Please enter a minimum of 7"

          },
          username: {
              required: "Please enter your username"
          },
          password: {
              required: "Please enter a valid password"
          },
          confirmPassword: {
              required: "Please enter the password again",
              equalto: "Please enter a matching password"
          }
        }
    });
});