JQuery：表单验证 - 没有得到任何结果
Posted
技术标签:
【中文标题】JQuery：表单验证 - 没有得到任何结果【英文标题】：JQuery: form validation - not getting any results 【发布时间】：2013-01-06 13:54:21 【问题描述】：我正在尝试实现此处找到的简单表单验证插件：http://www.jquery4u.com/forms/basic-jquery-form-validation-tutorial/
但我似乎无法让它工作。
我有一个简单的表格：
<form id="signupform" name="signupform" action="page" method="post" novalidate="novalidate">
<input type="text" id="signupusername" name="signupusername">
<input type="text" id="signupemail" name="signupemail">
<input type="password" id="signuppassword" name="signuppassword">
<input type="text" id="signupfirstname" name="signupfirstname">
<input type="text" id="signuplastname" name="signuplastname">
<input type="checkbox" name="tandc" value="tandcyes"> I agree
<button type="submit" value="Signup" class="submit">Signup</button>
</form>
以及相关的插件脚本：
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
(function($,W,D)
var JQUERY4U = ;
JQUERY4U.UTIL =
setupFormValidation: function()
//form validation rules
$("#signupform").validate(
rules:
signupusername: "required",
signupfirstname: "required",
signuplastname: "required",
signupemail:
required: true,
email: true
,
signuppassword:
required: true,
minlength: 5
,
tandcyes: "required"
,
messages:
signupusername: "Please enter your User Name",
signupfirstname: "Please enter your firstname",
signuplastname: "Please enter your lastname",
signuppassword:
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
,
signupemail: "Please enter a valid email address",
tandcyes: "Please accept our policy"
,
submitHandler: function(form)
form.submit();
);
//when the dom has loaded setup form validation rules
$(D).ready(function($)
JQUERY4U.UTIL.setupFormValidation();
);
)(jQuery, window, document);
但它不会起作用。
当然，我已经检查了插件和指向 JQuery 的链接是否存在且正确。控制台中也没有出现任何内容。它似乎没有触发。
有人知道怎么回事吗？
谢谢！
【问题讨论】：
用你的例子创建一个 jsfiddle 只是为了确认.. 你是否包含 jquery.js ...？ @Sudhir 是的，我做到了。所有其他 JQuery 工作正常 @Floradu88 可以。待命 这里工作正常jsfiddle.net/muthusamy/ns3mg 【参考方案1】：问题是您包含了 2 次相同的脚本。
带有验证的脚本中的函数在源代码中出现了 2 次。浏览器很难知道该选择哪一个。
检查 head 是否有两个脚本。
请在 form 中添加您的所有输入，它们不在表单标签中。
<form>
<input type=... />
<input type=... />
</form>
如果您在输入之前关闭表单，那就是问题。
【讨论】：
啊，我明白了！我已经删除了另一个。问题仍然存在，但你是对的 @MeltingDog 请更新网站以便进行更多调试。 我现在 - 第二个脚本已被删除 取消注释其他表单标签并注释实际标签。由于某种未知原因正在执行提交。 您的表单中没有输入，提交表单是正确的。【参考方案2】：使用此页面及其作品
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<title>Basic jQuery Validation Form Demo | jQuery4u</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript">
(function($,W,D)
var JQUERY4U = ;
JQUERY4U.UTIL =
setupFormValidation: function()
//form validation rules
$("#signupform").validate(
rules:
signupusername: "required",
signupfirstname: "required",
signuplastname: "required",
signupemail:
required: true,
email: true
,
signuppassword:
required: true,
minlength: 5
,
tandcyes: "required"
,
messages:
signupusername: "Please enter your User Name",
signupfirstname: "Please enter your firstname",
signuplastname: "Please enter your lastname",
signuppassword:
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
,
signupemail: "Please enter a valid email address",
tandcyes: "Please accept our policy"
,
submitHandler: function(form)
form.submit();
);
//when the dom has loaded setup form validation rules
$(D).ready(function($)
JQUERY4U.UTIL.setupFormValidation();
);
)(jQuery, window, document);
</script>
</head>
<body>
<h1>Basic jQuery Validation Form Demo</h1>
<!-- HTML form for validation demo -->
<form id="signupform" name="signupform" action="page" method="post" novalidate="novalidate">
<input type="text" id="signupusername" name="signupusername">
<input type="text" id="signupemail" name="signupemail">
<input type="password" id="signuppassword" name="signuppassword">
<input type="text" id="signupfirstname" name="signupfirstname">
<input type="text" id="signuplastname" name="signuplastname">
<input type="checkbox" name="tandc" value="tandcyes"> I agree
<button type="submit" value="Signup" class="submit">Signup</button>
</form>
<!-- END HTML form for validation -->
</body>
</html>
【讨论】：
以上是关于JQuery：表单验证 - 没有得到任何结果的主要内容，如果未能解决你的问题，请参考以下文章