jquery下拉验证提交

时间:2012-05-17 15:01:58

标签: jquery html jquery-validate

我正在努力让这个下拉菜单验证工作正常,我希望有人可以让我到达终点。此时验证适用于所有文本字段,包括电子邮件和电话,以及下拉列表。我的问题是,如果我第一次发送表单并收到错误,它会重定向回来说明错误。现在,如果用户正确选择所有字段并尝试重新提交,则提交按钮不会发送。请为我个人的健康和理智,有人帮助我。

以下是我服务器上文件的链接: http://amckeedesignportfolio.com/eLearningModule/newForm.php

以下是代码:

    <html>

    <head>
        <title>NJR Medical No-Bite V Survey</title>
        <link rel="stylesheet" type="text/css"
        href="style.css">
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/additional-methods.min.js"></script>
        <script type="text/javascript">
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });;
            $(document).ready(function () {
                // validate signup form on keyup and submit
                $("#contactForm").validate({
                    rules: {
                        fName: "required",
                        lName: "required",
                        telephone: "required",
                        email: {
                            required: true,
                            email: true
                        },
                        telephone: {
                            required: true,
                            phoneUS: true
                        },
                        position: "required",
                        hospital: "required",
                        hospitalCity: "required",
                        hospitalState: "required",
                        area: "required",
                        experience: "required",
                        question1: "required",
                        question2: "required",
                        question3: "required",
                        question4: "required",
                        question5: "required",
                        question6: "required",
                        question7: "required",
                        question8: "required",
                        question9: "required",
                        question10: "required",
                        question11: "required",
                    },
                    messages: {
                        fName: "Please enter your firstname.",
                        lName: "Please enter your lastname.",
                        telephone: "Please enter a valid telephone number.",
                        email: "Please specify a valid email address.",
                        position: "Please enter your current position.",
                        hospitalCity: "Please enter your current hospital.",
                        area: "Please enter the current floor or area you work.",
                    }
                });
                /* state validation*/
                $validator.addMethod("required", function (value, element) {
                    return this.optional(element) || (value.indexOf("") == -1);
                }, "Please select a option.");
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div class="ribbonForm">
                <img src="images/logoLarge.png" alt="NJR Medical Logo" height="60" width="280"
                />
                <h1>Contact Form</h1>
                <h2 class="please">Please take a few minutes to fill out the contact info and short survey
                    so that you can proceed with entering the NJR Medical No-Bite V eLearning
                    Module. All of the questions and contact info must be completed before
                    proceeding to the module.</h2>
                <form name="request" action="newSurveyProcess.php"
                method="POST" id="contactForm" onSubmit="valid_check();">
                    <h2>First Name :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="fName" type="text" class="box" />
                    </div>
                    <h2>Last Name :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="lName" type="text" class="box" />
                    </div>
                    <h2>Contact Number :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="telephone" type="text" class="box" />
                    </div>
                    <h2>Email Address :
                        <span style="padding-left:37px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="email" type="text" class="box" />
                    </div>
                    <h2>Position :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="position" type="text" class="box" />
                    </div>
                    <h2>Hospital :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="hospital" type="text" class="box" />
                    </div>
                    <h2>Hospital City :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="hospitalCity" type="text" class="box" />
                    </div>
                    <h2>Hospital State :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <select name="hospitalState" class="required">
                        <option value="" selected="selected">state</option>
                        <option value="AK">AK</option>
                        <option value="AL">AL</option>
                        <option value="AR">AR</option>
                        <option value="AZ">AZ</option>
                        <option value="CA">CA</option>
                        <option value="CO">CO</option>
                        <option value="CT">CT</option>
                        <option value="DC">DC</option>
                        <option value="DE">DE</option>
                        <option value="FL">FL</option>
                        <option value="GA">GA</option>
                        <option value="HI">HI</option>
                        <option value="IA">IA</option>
                        <option value="ID">ID</option>
                        <option value="IL">IL</option>
                        <option value="IN">IN</option>
                        <option value="KS">KS</option>
                        <option value="KY">KY</option>
                        <option value="LA">LA</option>
                        <option value="MA">MA</option>
                        <option value="MD">MD</option>
                        <option value="ME">ME</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MO">MO</option>
                        <option value="MS">MS</option>
                        <option value="MT">MT</option>
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="NE">NE</option>
                        <option value="NH">NH</option>
                        <option value="NJ">NJ</option>
                        <option value="NM">NM</option>
                        <option value="NV">NV</option>
                        <option value="NY">NY</option>
                        <option value="OH">OH</option>
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VA">VA</option>
                        <option value="VT">VT</option>
                        <option value="WA">WA</option>
                        <option value="WI">WI</option>
                        <option value="WV">WV</option>
                        <option value="WY">WY</option>
                    </select>
                    <h2>Area / Floor that you work :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <input name="area" type="text" class="box" />
                    </div>
                    <h2>I have worked in an ICU for:
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <select name="experience" class="required">
                        <option value="" selected="selected">select year range</option>
                        <option value="2">2 yrs</option>
                        <option value="2-4">2-4yrs</option>
                        <option value="5-10">5-10yrs</option>
                        <option value="11-20">11-20yrs</option>
                        <option value="+20yrs">more than 20yrs</option>
                    </select>
                    <h2>Comments :
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <div class="textbox_holder">
                        <textarea name="message" rows="5" cols="60"></textarea>
                    </div>
                    <h1>Survey Questions</h1>
                    <h2>Please be aware that you must select an answer to every question or your
                        form will not process and allow you to proceed. You must be allowed to
                        proceed for "The No- Bite V eLearning Module" to begin.
                        <span style="padding-left:
                                        25px;"></span>
                    </h2>
                    <h2>1. How often do you have a patient who resists oral care?
                        <span style="padding-left:
                                        25px;"></span>
                    </h2>
                    <br/>
                    <select name="question1" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Never">Never</option>
                        <option value="Rarely">Rarely</option>
                        <option value="Sometimes">Sometimes</option>
                        <option value="Always">Always</option>
                    </select>
                    <h2>2. How often do you have a patient bite on oral swabs with oral care?
                        <span
                        style=" 
                                        padding-left:25px;"></span>
                    </h2>
                    <select name="question2" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Never">Never</option>
                        <option value="Rarely">Rarely</option>
                        <option value="Sometimes">Sometimes</option>
                        <option value="Always">Always</option>
                    </select>
                    <h2>3. Have you ever had a patient break or damage a green swab from biting
                        it?
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <select name="question3" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                    <h2>4. How often do you have a patient bite on a Yankauer suction with oral
                        care?
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <select name="question4" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Never">Never</option>
                        <option value="Rarely">Rarely</option>
                        <option value="Sometimes">Sometimes</option>
                        <option value="Always">Always</option>
                    </select>
                    <h2>5. Have you ever had a patient break or damage a Yankauer suction from
                        biting it?
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <select name="question5" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                    <h2>6. Have you ever been biten during mouth care.?
                        <span style="padding-left:
                                                25px;"></span>
                    </h2>
                    <select name="question6" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                    <h2>7. Do you think patients who bite down and resist oral care tend to receive
                        inadequate oral hygiene?
                        <span style="padding-
    left:25px;"></span>
                    </h2>
                    <select name="question7" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                    <h2>8. How often do you have a Naso-Tracheal Suction Catherer coil in the
                        back of a patient's mouth upon insertion?
                        <span style="padding-left:25px;"></span>
                    </h2>
                    <select name="question8" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Never">Never</option>
                        <option value="Rarely">Rarely</option>
                        <option value="Sometimes">Sometimes</option>
                        <option value="Always">Always</option>
                    </select>
                    <h2>9. Do you think that patients who have a Naso- Tracheal Suction Catheter
                        coil in the back of a patient's mouth receive inadequate Naso-Tracheal
                        Suctioning?
                        <span style="
                                                padding-left:25px;"></span>
                    </h2>
                    <select name="question9" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                    <h2>10. How often do you have a patient bite an Oral-Pharnygeal Suction Catheter?
                        <span
                        style="padding-left:25px;"></span>
                    </h2>
                    <select name="question10" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Never">Never</option>
                        <option value="Rarely">Rarely</option>
                        <option value="Sometimes">Sometimes</option>
                        <option value="Always">Always</option>
                    </select>
                    <h2>11. Have you ever had a patient damage an Oral- Pharnygeal Suction Catheter
                        from biting it?
                        <span style="padding-
    left:25px;"></span>
                    </h2>
                    <select name="question11" class="required">
                        <option value="" selected="selected">--select--</option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                    <h3>
                        <input name="submit" type="submit" value="submit" />
                    </h3>
                </form>
                <!--closes form-->
            </div>
            <!--closes ribbonForm -->
        </div>
        <!--closes wrapper-->
    </body>

</html>

1 个答案:

答案 0 :(得分:1)

请你删除以下部分

jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });;

现在正在运作..请检查链接http://jsfiddle.net/R5egy/3/