0

所以我现在已经考虑这个特殊问题 2 小时了......目前我正在尝试使用来自 jQuery 的以下插件来验证表单：

http://docs.jquery.com/Plugins/Validation

到目前为止，我得到了以下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Patient Form</title>
        <link rel="stylesheet" href="css/styles.css" type="text/css">
        <link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
        <script src="js/html5.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/jquery.validate.js"></script>

        <script type="text/javascript">
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });;
        </script>

  <script>
  $(document).ready(function() {

    $("#dateOfBirth").datepicker({
            dateFormat : 'mm/dd/yy',
            changeMonth : true,
            changeYear : true,
            yearRange: '-100y:c+nn',
            maxDate: '-1d'
        }
    );

    $("#firstNames").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your first names (required)."
    });

    $("#surname").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your surname (required)."
    });

    $("#salutation").validate({
        expression: "if (isChecked(SelfID)) return true; else return false;",
        message: "Please choose an option (required)."
    });

    $("#homeAddress").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your home address (required)."
    });

    $("#homePhone").validate({
        expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 9)return true; else return false;",
        message: "Please enter your home phone (required - 9 digits) (e.g 034567890)",
        required: true,
        minlength: 9,
        maxlength:9
    });

    $("#workPhone").validate({
        expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 9)return true; else return false;",
        message: "Your work phone requires 9 digits (e.g 034567890)",
        required: false, // this should not make this field "required"
        minlength: 9,
        maxlength:9
    });

    $("#cellPhone").validate({
        expression: "if (VAL.match(/^[0-9]*$/) && VAL.length == 10)return true; else return false;",
        message: "Your cell phone requires 10 digits (e.g 02761234567)",
        required: false, // this should not make this field "required"
        minlength: 10,
        maxlength:10
    });

    $("#occupation").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your occupation (required)."
    });

    $("#dateOfBirth").validate({
        expression: "if (VAL) return true; else return false;",
        message: "Please enter your date of birth (required)."
    });

    //checking that a "salutation is selected
    function countUnchecked() {
      var n = $("input:unchecked").length;
      if(n == 0){
          $("div").text("Please select a salutation.");
      }
    }
    countUnchecked();




  });

  </script>
    </head>

    <body>

        <div class="container">
            <header>
            <h1>Patient Form</h1>
            </header>

            <article class="intro_page">

            <fieldset class="fieldset_form1">
            <legend class="legend">Details 1</legend>
            <form id="form1" method="post" action="form2.php" enctype="application/x-www-form-urlencoded">


            <p class="fontStyle"><label for="firstNames" class="labelStyle_form1">First Names: </label>
            <input type="text" name="firstNames" id="firstNames" size="50" maxlength="150"></p>

            <p class="fontStyle"><label for="surnames" class="labelStyle_form1">Surname: </label>
            <input type="text" name="surname" id="surname" size="50" maxlength="150"></p>

            <p class="fontStyle"><label for="salutation" class="labelStyle_form1">Salutation:</label>
            <input name="salutation" id="salutation_1" value="Sir" type="radio" >Sir
            <input name="salutation" id="salutation_2" value="Dr" type="radio" >Dr
            <input name="salutation" id="salutation_3" value="Mr" type="radio" >Mr
            <input name="salutation" id="salutation_4" value="Mrs" type="radio" >Mrs
            <input name="salutation" id="salutation_5" value="Miss" type="radio" >Miss
            <input name="salutation" id="salutation_6" value="Ms" type="radio" >Ms
            </p>
            <div></div>

            <p class="fontStyle"><label for="homeAddress" class="labelStyle_form1">Home Address: </label>
            <input type="text" name="homeAddress" id="homeAddress" size="50" maxlength="200"></p>

            <p class="fontStyle"><label for="workAddress" class="labelStyle_form1">Work Address: </label>
            <input type="text" name="workAddress" id="workAddress" size="50" maxlength="200"></p>

            <p class="fontStyle"><label for="homePhone" class="labelStyle_form1">Home Phone: </label>
            <input type="text" name="homePhone" id="homePhone"></p>

            <p class="fontStyle"><label for="workPhone" class="labelStyle_form1">Work Phone: </label>
            <input type="text" name="workPhone" id="workPhone"></p>

            <p class="fontStyle"><label for="cellPhone" class="labelStyle_form1">Cell Phone: </label>
            <input type="text" name="cellPhone" id="cellPhone"></p>

            <p class="fontStyle"><label for="occupation" class="labelStyle_form1">Occupation: </label>
            <input type="text" name="occupation" id="occupation" size="50" maxlength="100"></p>

            <p class="fontStyle"><label for="dateOfBirth" class="labelStyle_form1">Date of Birth: </label>
            <input id="dateOfBirth" name="dateOfBirth"></p>

            <p class="buttonsAlign"><input type="button" onClick="location.href='index.php'" class="button blue gradient positionLeft" value="Back">
<input type="submit" class="button blue gradient" value="Next"></p>

            </form>
            </fieldset>

            </article>

            <footer>
            </footer>
        </div>

    </body>
</html>

验证大多数字段似乎工作正常，除了我无法验证无线电输入选项（“称呼”）。如果未选择单选选项，我想要一条错误消息（类似于成功实施的其他字段）。

对于“workPhone”和“cellPhone”文本字段，它们不是必需的；但是，我仍然想验证用户在字段中输入的任何输入。即使我将这两个字段的“必需”设置为 false，但验证的行为似乎就像它们是必需的一样。

如果有人能够帮助我确定表单验证行为不正确的原因，请告诉我。我还认为有必要包含此表单的所有代码，因此如果有人需要截断此代码，请告诉我。

提前致谢！

4

2 回答 2

0

选择器“:unchecked”不存在，可以反转选择器，将条件改为“大于”

function countUnchecked() {
    var n = $("input:radio:not(:checked)").length;
    if (n > 0) {
        $("div").html("Please select a salutation.");
    }
}​
于 2012-10-12T05:12:23.000 回答
0

你做的是错的。在您的按钮上放置一个 id 或唯一类，并尝试使用 click 功能触发错误。忘记你的 countUnchecked 函数，因为它总是会在页面加载后触发，即使你还没有填写表格。试试这个

  $("#buttonid").click(function(){
   var n = $("input:radio[name=salutation]:checked").val();
   if(!n){                                   
       $("div").text("Please select a salutation.");
    }   
 });
于 2012-10-12T05:26:00.007 回答