jQuery表单未验证

Question

I am writing a basic form which requires validation. 我正在写一个需要验证的基本表格。 I cannot determine what I have missed that is causing the validation to be overlooked? 我无法确定我错过了什么导致验证被忽略？

I have matched the tags but the ending tags at the bottom of the form don't look right. 我已经匹配了标签，但是表单底部的结尾标签看起来不正确。

Any help would be great! 任何帮助将是巨大的！

Code: 码：

<!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) Remove novalidate="novalidate" from the form tag. 1）从form标签中删除novalidate="novalidate" 。 This is not breaking anything but it's superfluous because the validation plugin dynamically adds this attribute. 这并没有破坏任何东西，但是它是多余的，因为验证插件会动态添加此属性。

2) Your action attribute is blank so when the form submits, it will not go anyplace. 2）您的action属性为空，因此在提交表单时，它将不会出现在任何地方。 Perhaps you already knew that. 也许您已经知道了。

3) The HTML markup for your two buttons is broken... 3）您两个按钮的HTML标记已损坏...

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

Your style attribute is missing its quotation marks and you don't need the onclick attribute. 您的style属性缺少引号，并且您不需要onclick属性。

4) You don't need the submitHandler callback if it only contains form.submit() as that's the default. 4）如果它只包含form.submit() ，则不需要submitHandler回调，因为这是默认设置。 Remove it and the <form> action attribute will be where the form submits. 删除它， <form> action属性将是表单提交的位置。 Otherwise, you would use the submitHandler for your ajax code. 否则，您将为您的ajax代码使用submitHandler 。

5) Your closing form tag should be </form> and not </form2 > . 5）您的结束form标签应为</form>而不是</form2 > 。

6) Your "Clear" button is coded as type="clear" . 6）您的“清除”按钮被编码为type="clear" 。 There is no such type as clear . 没有像clear这样的type 。 Change it to type="button" or type="reset" . 将其更改为type="button"或type="reset" 。

7) Wrapping up everything like this is superfluous, unnecessary, verbose, and arcane... 7）像这样包装所有东西都是多余的，不必要的，冗长的和不可思议的...

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

    JQUERY4U.UTIL =
    {
        form2validation: function()
        {
            $("#form2").validate({ .... });
        }
    }

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

})(jQuery, window, document);

It serves no useful purpose other than to cause more confusion to those seeking guidance. 除了使那些寻求指导的人更加困惑之外，它没有其他目的。 It comes from a popular, yet poorly explained, online demo/tutorial by Sam Deering that is linked to/from many places. 它来自Sam Deering的一个流行的但没有得到很好解释的在线演示/教程，该演示链接到许多地方/来自许多地方。 IMO, if you're going to pass yourself off as a jQuery/JavaScript expert, at least use the code formatting style more commonly seen in JavaScript, and not the one used with PHP (Allman). IMO，如果您要假扮成jQuery / JavaScript专家，请至少使用在JavaScript中更常见的代码格式化样式，而不是与PHP（Allman）一起使用。 Whatever code formatting style you choose, at least be consistent with it throughout. 无论选择哪种代码格式样式，至少都应与之保持一致。

Exactly like any other jQuery plugin , simply wrapping the .validate() method within the DOM ready event handler is more than adequate for proper initialization of this plugin. 与任何其他jQuery插件一样 ，仅将.validate()方法包装在DOM ready事件处理程序中就足以对该插件进行适当的初始化。

$(document).ready(function() {

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

});

I'm not sure which, if any, of those issues broke your form but it validates fine otherwise. 我不确定这些问题中的哪一个（如果有的话）破坏了您的表格，但否则可以很好地验证。

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

Answer 2

Few things: 一些事情：

Closing tag of your form should be </form> and not </form2> 表单的结束标记应为</form>而不是</form2>
remove "novalidate" attribut from the form tag so that it looks like this -- 从表单标签中删除“ novalidate”属性，使其看起来像这样-
```
 <form id="form2" name="form2" method="post" action=""> 
```

jQuery表单未验证

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-06-24 01:45:18

解决方案2
-1 2014-06-24 00:10:32

jQuery表单未验证

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-06-24 01:45:18

解决方案2 -1 2014-06-24 00:10:32

解决方案1
2 已采纳 2014-06-24 01:45:18

解决方案2
-1 2014-06-24 00:10:32