如何使用jQuery验证我的表单?

时间:2014-02-17 20:33:01

标签: javascript jquery html html5

我很困惑在哪里可以找到我的错误。

<head>
    <title>SAMPLE VALIDATION USING JQUERY</title>
</head>
<style>
    .error {
        color: red;
    }
</style>
<script src="/WebExercise/jquery-1.9.0.js"></script>
<script src="/WebExercise/jquery.validate.min.js"></script>
<script src="jquery.js"></script>
<script>
    $.validator.setDefaults({
        submitHandler: function () {
            alert("SUBMITTED!");
        }
    });
    jQuery.validator.addMethod("accept", function (value, element, param) {
        return value.match(new RegExp("." + param + "$"));
    });

    $(document).ready(function () {
        // validate form on keyup and submit
        $("#form1").validate({
            rules: {
                firstname: {
                    accept: "[a-zA-Z]+"
                },
                fname: {
                    accept: "[a-zA-Z]+"
                },
                mname: {
                    accept: "[a-zA-Z]+"
                },
                zip: {
                    accept: "[0-9]+"
                },
                age: {
                    accept: "[0-9]+"
                },
                bday: {
                    accept: "[a-zA-Z0-9]"
                },
                sss: {
                    accept: "[0-9]+"
                },
                t: {
                    accept: "[0-9]+"
                },
                cp: {
                    accept: "[0-9]+"
                },
                stno: {
                    accept: "[a-zA-Z0-9]"
                },
                add: {
                    accept: "[a-zA-Z0-9]"
                },
                pos1: {
                    accept: "[a-zA-Z0-9]"
                },
                pos2: {
                    accept: "[a-zA-Z0-9]"
                },
                d: {
                    accept: "[0-9]+"
                },
                h1: {
                    accept: "[0-9]+"
                },
                em: {
                    required: true,
                    em: true
                }
            },
            messages: {
                date: "Enter Date!",
                lname: "Letters only",
                fname: "Letters only",
                mname: "Letters only",
                add: "Alphanumeric ",
                zip: "Numbers only",
                age: "Numbers only",
                t: "Numbers only",
                cp: "Numbers only",
                sss: "Numbers only",
                pos1: "Alphanumeric ",
                pos2: "Alphanumeric ",
                d: "Numbers Only ",
                h1: "Numbers Only ",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 6 characters"
                },
                em: "Please enter a valid email address",
            }
        });
    });
</script>

这是我的HTML:

    <body>
    <form name="form1" id="form1" action="#" method="post">

<h2><font face="Arial" size="5"><b></b></font><b><center><font face="Arial" size="5">
        SAMPLE APPLICATION FORM<br><br><br><br><br>
        APPLICATION FOR EMPLOYMENT<br>
        APPLICANTS MAY BE TESTED FOR ILLEGAL DRUGS<br>
        (MANILA)</font></center></b></h2>

        <br>
        <br>
        <br>
        <table style="margin: auto;">
            <tbody>
                <tr>
                    <th>
                        <br>PLEASE PRINT ALL REQUESTED INFORMATION
                        <br>EXCEPT SIGNATURE
                        <br>
                        <br>
                    </th>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div align="center">
                            <input type="text" placeholder="SIGNATURE">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr width="100%" size="1" color="black">
        <br>
        <div align="right">
            <label for="date">Date:</label>
            <input type="date" size="3" name="date">
        </div>
        <br>
        <br>
        <fieldset>
            <legend>
                <div align="center"><u>PERSONAL INFORMATION</u>
                </div>
            </legend>
            <li>
                <label for="lname">Last Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" name="lname" placeholder="Last Name" maxlength="25">
            </li>
            <br>
            <li>
                <label for="fname">First Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" name="fname" placeholder="First Name" maxlength="25">
            </li>
            <br>
            <li>
                <label for="mname">Middle Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" name="mname" placeholder="Middle Name" maxlength="25">
            </li>
            <br>
            <br>
            <li>
                <label="bday">Birthday</label>
                    <input type="text" name="bday" size="15" </li>
                    <br>
                    <br>
                    <label for="add">Present Address:</label>
                    <li>
                        <input type="text" name="add" maxlength="4" size="5" min="1" max="9999" placeholder="Street No.">
                        <input type="text" name="add" maxlength="30" size="15" placeholder="Street" pattern="[a-zA-Z]*">
                        <input type="text" name="add" maxlength="30" size="15" placeholder="City" pattern="[a-zA-Z]*" title="Letters Only">
                        <input type="text" name="add" maxlength="30" size="15" placeholder="State" pattern="[a-zA-Z]*" title="Letters Only">
                        <input type="text" name="zip" maxlength="4" size="5" min="1" max="9999" placeholder="Zip Code" title="Numbers Only" pattern="[0-9]*">
                    </li>
                    <br>
                    <br>
                    <li>
                        <label for="gender">Gender:</label>
                        <input type="radio" name="gender" size="3">Male
                        <input type="radio" name="gender" size="3">Female</li>
                    <br>
                    <br>
                    <li>
                        <label for="em">Email</label>
                        <input type="email" name="em" size="15" placeholder="abc123@456.com" data-validation="em">
                    </li>
                    <br>
                    <br>
                    <li>
                        <label for="age">Age</label>
                        <input type="text" name="em" size="10">
                    </li>
                    <br>
                    <br>
                    <li>
                        <label for="hl">How long are you planning to work?</label>
                        <input type="text" name="hl" maxlength="4" size="3" min="0" max="9999" title="State number of days!" pattern="[0-9]*">
                    </li>
                    <br>
                    <li>
                        <label for="sss">Social Security Number:</label>
                        <input type="text" name="sss" size="5" maxlength="3" min="0" max="9" placeholder="      ---" title="Numbers Only" pattern="[0-9]*">
                        <input type="text" name="sss" size="5" maxlength="2" min="0" max="9" placeholder="      -- " title="Numbers Only" pattern="[0-9]*">
                        <input type="text" name="sss" size="5" maxlength="4" min="0" max="9" placeholder="      ----" `title="Numbers Only" pattern="[0-9]*">
                    </li>
                    <br>
                    <br>
                    <li>
                        <label for="t">Telephone No.:</label>
                        <input type="text" name="t" maxlength="7" title="Numbers Only" pattern="[0-9]*">
                    </li>
                    <br>
                    <br>
                    <li>
                        <label for="cp">Cellphone No.:</label>
                        <input type="text" name="cp" maxlength="11" title="Numbers Only" pattern="[0-9]*">
                    </li>
                    <br>
                    <li>
                        <label for="u">If under 18, please list age:</label>
                        <input type="text" name="u" maxlength="2" min="1" max="17" title="Numbers Only" pattern="[0-9]*">
                    </li>
                    <br>
                    <li>
                        <label for="pos">Position applied for:</label>
                        <input type="text" name="pos1" size="30" placeholder="(1)Please Specify">
                        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                        <input type="text" name="pos2" size="30" placeholder="(2)Please Specify">
                    </li>
                    <br>
                    <li>
                        <label for="days">Desired Available Days Of Work</label>
                    </li>
                    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; No Pref&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="No Pref">Monday&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Monday" class="styled" onclick="return testcheck()">Tuesday&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Tuesday" class="styled" onclick="return testcheck()">Wednesday&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Wednesday" class="styled" onclick="return testcheck()">
                    <br>
                    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; Thursday&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Thursday" onclick="return testcheck()">Friday&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Friday" onclick="return testcheck()">Saturday&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Saturday" onclick="return testcheck()">Sunday&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="days" value="Sunday" onclick="return testcheck()">
            </li>
            <br>
            <br>
            <br>
            <li>
                <label for="d">Salary desired:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input type="text" name="d" size="20" placeholder="&#8369;" title="Numbers Only" pattern="[0-9]*">
            </li>
            <br>
            <br>
            <br>
            <li>
                <label for="ed">Employment desired:</label><span class="hint">*Choose one</span>

                <input type="radio" name="ed" value="FULL-TIME" class="styled"><u>FULL-TIME</u>

                <input type="radio" name="ed" value="PART-TIME" class="styled"><u>PART-TIME</u>

                <input type="radio" name="ed" value="FULL-OR PART-TIME" class="styled"><u>FULL-OR PART-TIME</u>

            </li>
            <br>
            <br>
            <li>
                <label for="w">When available for work?</label>
                <input type="text" name="w">
                <hr width="100%" size="1" color="black">
            </li>
        </fieldset>
        <br>
        <hr width="100%" size="3" color="black">
        <table border="0" style="margin: auto;" width="990">
            <tbody>
                <tr>
                    <td width="150">
                        <center>TYPE OF SCHOOL</center>
                    </td>
                    <td width="220">
                        <center>NAME OF SCHOOL</center>
                    </td>
                    <td width="220">
                        <center>LOCATION
                            <br>(Complete Mailing Address)</center>
                    </td>
                    <td width="120">
                        <center>NUMBER OF YEARS
                            <br>COMPLETED</center>
                    </td>
                    <td width="220">
                        <center>MAJOR &amp; DEGREE</center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>
                            <label="a">High School</label>
                        </center>
                    </td>
                    <td>
                        <textarea rows="2" name="a" cols="30"></textarea>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>
                            <label="b">College</label>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>
                            <label="c">Bus/Trade School</label>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>
                            <label="p">Professional School</label>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                    <td>
                        <center>
                            <textarea rows="2" cols="30"></textarea>
                        </center>
                    </td>
                </tr>
                <tr>
                    <td>
                        <center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                    <td>
                        <center></center>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr width="100%" size="1" color="black">
        <br>
        <br>
        <br>

<h2><i>HAVE YOU EVER BEEN CONVICTED OF A CRIME?</i>
     <label = "h"></label>
     <div align="center">
     <font size="4">
     <br>
     <br>
     <input type="checkbox" name"h">YES&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="checkbox" name"h">NO
     </div>
     </center>
     </h2>

        <br>
        <br>
        <br>
<i>
If yes, please state number of conviction(s), nature of the offense(s) leading to conviction(s), how recently such offense(s) was/were committed, sentence(s) imposed, and type(s) of rehabilitation.</i>

        <hr width="100%" size="2" color="black">
        <textarea rows "6" cols="222"></textarea>
        <br>
        <hr width="100%" size="2" color="black">
        <br>
        <center>
            <input type="submit" value="Submit" type="submit" onclick="return (verify());" />
            <input type="reset" value="Reset" type="reset">
        </center>
        <frame scrolling="auto"></frame>
        </frameset>
        </font>
        </center>
        </h2>
        </body>

正如您所看到我需要验证方面的帮助,我似乎无法验证我的jQuery网站。如果输入文本为空,则应显示红色文本。这是HTML,我是否需要更改验证器?

1 个答案:

答案 0 :(得分:0)

在这里试试这个jsfiddle:http://jsfiddle.net/Qd58u/

你的标签也混杂在html中,/ form应该在/ body

</form>
</body>

您可能只需要这两个,确保路径正确且文件存在:

<script src="/WebExercise/jquery-1.9.0.js"></script>
<script src="/WebExercise/jquery.validate.min.js"></script>