Question

我正在写一个需要验证的基本表单。我无法确定我错过了什么导致验证被忽略？

我已经匹配了标签，但表单底部的结尾标签看起来并不正确。

任何帮助都会很棒！

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../script.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

<title>HTML Assignment</title>

<script type="text/javascript">

(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        form2validation: function()
        {
            //form validation rules
            $("#form2").validate({
                rules: {
                    fName: "required",
                    lName: "required",
                    sAddress: "required",
                    city: "required",
                    state: "required",
                },
                messages: {
                    fName: "Please enter your first name",
                    lName: "Please enter your last name",
                    sAddress: "Please enter your street address",
                    city: "Please enter your city",
                    state: "Please enter state",

                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

 $(D).ready(function($) {
        JQUERY4U.UTIL.form2validation();
    });

})(jQuery, window, document);

</script>
</head>
<body>

<div id="page-wrap">

<div id="header">

<div id="content">

<form id="form2" name="form2" method="post" action="" novalidate="novalidate">
  <h1>
    Demographic Information Entry Screen
  </h1>

<p>
    <label for="fName">First Name:</label>
    <input type="text" name="fName" id="fName" />

</p>
<p>
    <label for="lName">Last Name:</label>
    <input type="text" name="lName" id="lName" />

</p>
  <p>
    <label for="sAddress">Street Address:</label>
    <input name="sAddress" type="text" id="sAddress" size="30" maxlength="28" />

  </p>
<p>
    <label for="city">City: </label>
    <input name="city" type="text" id="city" size="20" maxlength="20" />

    <label for="state">State:</label>
    <select name="state" size="1" id="state">
        <option value="State">State</option>
        <option value="AL">AL</option>
        <option value="AR">AR</option>
        <option value="MS">MS</option>
        <option value="TN">TN</option>
        <option value="TX">TX</option>
    </select>

  </p>
  <p>
  <legend> Gender: </legend> 
  <table width="200">
    <tr>
      <td align="left" valign="top"><label>
        <input type="radio" name="genderRG" value="radio" id="genderRG_0" />
        Male</label>        <label>
          <input type="radio" name="genderRG" value="radio" id="genderRG_1" />
        Female</label>
      </td>
    </tr>
  </table>

  </p>

<p>
    <input type="submit" name="submit" id="submit" value="Submit" onclick="" style=margin-right: 30px />

    <input type="clear" name="clear" id="clear" value="Clear" onclick="" style=margin-right: 30px />

</p>
</form2 >
</Div>

</html>

Answer 1

1）从novalidate="novalidate"标记中删除form。这不会破坏任何东西，但它是多余的，因为验证插件会动态添加此属性。

2）您的action属性为空，因此当表单提交时，它不会出现在任何地方。也许你已经知道了。

3）两个按钮的HTML标记已损坏......

<input type="submit" name="submit" id="submit" value="Submit" onclick="" style=margin-right: 30px />

您的style属性缺少其引号，并且您不需要onclick属性。

4）如果submitHandler仅包含form.submit()，则您不需要<form>回调，因为它是默认值。删除它，action submitHandler属性将是表单提交的位置。否则，您可以使用ajax作为form代码。

5）您的结束</form>代码应该是</form2 >而不是type="clear"。

6）你的＆＃34;清除＆＃34;按钮编码为type。 clear没有type="button"这样的type="reset"。将其更改为(function($,W,D) { var JQUERY4U = {}; JQUERY4U.UTIL = { form2validation: function() { $("#form2").validate({ .... }); } } $(D).ready(function($) { JQUERY4U.UTIL.form2Validation(); }); })(jQuery, window, document);或.validate()。

7）包装这样的一切都是多余的，不必要的，冗长的，神秘的......

$(document).ready(function() {

    $("#form2").validate({
        // any rules, options and callbacks
    })

});

除了给寻求指导的人带来更多混淆之外，它没有用处。它来自一个流行但却很难解释的online demo/tutorial by Sam Deering，与许多地方有联系。 IMO，如果你想以jQuery / JavaScript专家的身份离开自己，至少使用JavaScript中常见的代码格式样式，而不是PHP（Allman）使用的代码格式样式。无论您选择何种代码格式样式，至少应始终如一。

与任何其他jQuery插件完全一样，只需将{{1}}方法包装在DOM ready事件处理程序中就足以正确初始化此插件。

{{1}}

我不确定哪些问题（如果有的话）会破坏您的表格，但是否则会有效。

DEMO：http://jsfiddle.net/uHN9W/

Answer 2

少数事情：

表单的结束标记应为</form>而不是</form2>
删除＆＃34; novalidate＆＃34;来自表单标签的attribut，使它看起来像这样 -
```
<form id="form2" name="form2" method="post" action="">
```

jQuery表单没有验证

2 个答案: