我正在根据JSON数据创建表单向导。我已经创建了一个基于JSON feed的表单，并且我的工作正常，接下来是如何将jquery validation.js合并到我的代码中。
我正在使用jquery.dfrom来生成基于JSON示例的表单 https://github.com/daffl/jquery.dform
接下来，我想在提交之前验证为用户输入生成的表单。
如何验证此生成的html表单？ 感谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JSOn based form wizard jQuery dForm</title>
</head>
<style type="text/css">
input, label {
display: block;
margin-bottom: 5px;
}
</style>
<body>
<form id="demo-2-form"></form>
<!-- Load jQuery and the minified plugin -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.validate.js"></script>
<script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script>
<script type="text/javascript" class="demo" id="demo-2">
$('#demo-2-form').dform({
"action":"index.html",
"method":"post",
"html":[
{
"type":"fieldset",
"caption":"User information",
"html":[
{
"name":"email",
"caption":"Email address",
"type":"text",
"placeholder":"E.g. user@example.com",
"validate":{
"email":true
}
},
{
"name":"password",
"caption":"Password",
"type":"password",
"id":"registration-password",
"validate":{
"required":true,
"minlength":5,
"messages":{
"required":"Please enter a password",
"minlength":"At least {0} characters long"
}
}
},
{
"name":"password-repeat",
"caption":"Repeat password",
"type":"password",
"validate":{
"equalTo":"#registration-password",
"messages":{
"equalTo":"Please repeat your password"
}
}
},
{
"type":"radiobuttons",
"caption":"Sex",
"name":"sex",
"class":"labellist",
"options":{
"f":"Female",
"m":"Male"
}
},
{
"type":"checkboxes",
"name":"test",
"caption":"Receive newsletter about",
"class":"labellist",
"options":{
"updates":"Product updates",
"errors":{
"value":"security",
"caption":"Security warnings",
"checked":"checked"
}
}
}
]
},
{
"type":"fieldset",
"caption":"Address information",
"html":[
{
"name":"name",
"caption":"Your name",
"type":"text",
"placeholder":"E.g. John Doe"
},
{
"name":"address",
"caption":"Address",
"type":"text",
"validate":{ "required":true }
},
{
"name":"zip",
"caption":"ZIP code",
"type":"text",
"size":5,
"validate":{ "required":true }
},
{
"name":"city",
"caption":"City",
"type":"text",
"validate":{ "required":true }
},
{
"type":"select",
"name":"continent",
"caption":"Choose a continent",
"options":{
"america":"America",
"europe":{
"selected":"true",
"id":"europe-option",
"value":"europe",
"html":"Europe"
},
"asia":"Asia",
"africa":"Africa",
"australia":"Australia"
}
}
]
},
{
"type":"submit",
"value":"Signup"
}
]
});
</script>
</body>
</html>
答案 0 :(得分：1)
我假设您指的是this plugin进行验证，在这种情况下，您需要向表单添加类，以告诉它您正在进行哪种类型的验证。它看起来像你的代码示例，这不是你所追求的确切库，但它应该与实现类似。将来，请务必指定这些内容 - 这样的细节非常重要。
dform插件不有内置回调，因此您无法准确知道表单何时在页面上。这意味着由于缺少回调，任何立即在表单上运行的验证插件都很难实现。另一方面，如果您正在使用一个验证插件，该插件只需将一个on submit处理程序附加到表单上，它应该只需调用它而不需要对代码进行其他更改，正如Kevin B在第一条评论中所建议的那样
无论哪种方式，只要您在提交表单后以编程方式运行验证插件，您就可以了。您应该可以为任何体面的插件执行此操作 - 我上面链接的jquery验证确实具有此功能（尽管它没有做出惊人的工作）。你会像这样运行它：
$('#demo-2-form').on('submit', function(e){
e.preventDefault();
if ($(this).validate().form()) {
$(this).submit();
} else {
console.log("fill your form out right man!");
}
});
这将根据您设置的参数验证表单，但是对于此特定插件，不会为您提供大量有用的信息来标记错误的位置。还有其他方法可以用来做这个（对于这个插件，你必须循环遍历每个字段，检查它是否有错误），但我认为这不值得写出来。
真的，我没有遇到过一个好的javascript验证库（也没有我的同事）。在这里抓住提交并自己编写验证可能是值得的 - 这将更加清晰，您可以按照自己的方式进行自定义。此外，这些验证中的每一个都可以写成javascript一行。这通常是我最终要做的事情，而且几乎不需要花费更多时间。您可以使用与上面相同的捕获提交的方法，只需将jquery validate插件行替换为检查字段并验证它们的几行。