简体   繁体   English

jQuery不验证表格

[英]JQuery not validating form

I try to validate a form, when I hit the submit button. 当我点击“提交”按钮时,我尝试验证表单。 But it just continues on posting data entered in the form to the subsequent page like the validation did not even exist. 但是它只是继续将表单中输入的数据发布到下一页,就像没有验证一样。

This the validation codes 这是验证码

<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"
          }
        }
    });
});

This is the form 这是表格

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

There are some errors in the code such as missing comma and $document instead of $(document) as @tushar mentions. 代码中存在一些错误,例如缺少逗号和$ document而不是@tushar提到的$(document)。

i fixed those and created jsfiddle for that see the link 我修复了这些问题并为此创建了jsfiddle,请参见链接

http://jsfiddle.net/jigardafda/bb1j3ktp/1/ 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 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"
          }
        }
    });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM