包含多部分形式的jQuery验证 [英] jQuery Validation with multi-part form
问题描述
在我逐步解决的过程中，这可能会变成多个问题，但我需要一些严肃的jQuery帮助.我基于 bassistance.de 上的示例创建了一个多部分表单. .在该演示中，验证非常简单-使用类指定必填字段，遍历表单元素标题属性并从中提取错误消息.
This will probably turn into multiple questions as I work my way through it but I'm in need of some serious jQuery help. I've created a multi-part form based on the example at bassistance.de. In that demo, the validation is fairly simple - designating required fields with a class, iterating through and pulling error messages from the form element title attributes.
我的表单比演示更复杂-在这种情况下，我实在无法实现验证.例如，在演示中，错误恰好在form元素之后.就我而言，我想指定要验证的字段，创建规则，并根据是否为错误指定要在类中放置错误的位置.我正在使用Blueprint CSS框架，它已经为此类事情构建了类，但是，正如我所说，我不知道如何使它工作.
My form is more complex than the demo - and I'm in over my head with implementing the validation in this instance. For example, in the demo, the errors are coming right after the form element. In my case, I want to designate the fields I want validate, create the rules and specify where I want to put errors with a class depending on whether they are errors or not. I'm using the Blueprint CSS framework and it already has classes built for such things but, as I said, I can't figure out how to make that work.
理想情况下，我也希望能够在演示中更改验证方法，并替换我更熟悉的验证方法-例如:
Ideally, I'd like to be able to change the validation method in the demo as well and substitute one that I'm more familiar with - like:
$("#theForm").validate({
errorPlacement: function(error, element) {
if(element.attr("name") === "name") {
error.appendTo("#nameError");
}
},
groups: {
capacityGroup: "progMin progMax",
},
rules: {
fName: "required",
},
messages: {
fName: "*First Name is required",
}
});
因此，我当然希望有人可以提供帮助.我在 www.43rdworld.com/multitest.htm 上上传了一个稍有不同的演示，为错误消息和样式表添加了div.我真的很想更改表单的验证方式，以便仍可以在提交之前逐页进行验证，但让我指定必填字段，编写自己的规则和消息并指定这些消息的显示位置.
So, I surely hope someone can help with this. I've uploaded a slightly different demo at www.43rdworld.com/multitest.htm with an added div for error messages and the stylesheet. I'd really like to change the way the form is validated so that it will still validate from page to page before being submitted but let me specify the required fields, write my own rules and messages and specify where those messages will display.
推荐答案
引用OP:
"在我逐步解决的过程中，这可能会变成多个问题，但我需要一些严重的JQuery帮助."
"This will probably turn into multiple questions as I work my way through it but I'm in need of some serious JQuery help."
您的发布内容实际上并不适合于StackOverflow格式，在这种格式中，仅要求简洁明了的问题.请参阅 StackOverflow问题清单和 sscce.org 以获得更多发布指导.
Your posting doesn't really fit the StackOverflow format where only concise and specific questions are expected. Please see the StackOverflow question checklist and sscce.org for more posting guidance.
但是，如果您想使用jQuery Validate做多步骤表单，则有几种不同的方法.这是我的...
However, if you want to do a multi-step form with jQuery Validate, there are a few different approaches; here's mine...
当我创建多步骤表单时，我为每个部分使用一组唯一的<form>标记.然后，我将使用 .valid()方法来测试该部分，然后再进行下一步. (别忘了先初始化插件；在DOM上的所有表单上都调用.validate().)
When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)
然后在最后一节中，我在每种表单上使用.serialize()并将它们连接到要提交的数据查询字符串中.
Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.
类似这样的事情...
Something like this...
$(document).ready(function() {
$('#form1').validate({ // initialize form 1
// rules
});
$('#gotoStep2').on('click', function() { // go to step 2
if ($('#form1').valid()) {
// code to reveal step 2 and hide step 1
}
});
$('#form2').validate({ // initialize form 2
// rules
});
$('#gotoStep3').on('click', function() { // go to step 3
if ($('#form2').valid()) {
// code to reveal step 3 and hide step 2
}
});
$('#form3').validate({ initialize form 3
// rules,
submitHandler: function (form) {
// serialize and join data for all forms
var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
// ajax submit
return false; // block regular form submit action
}
});
// there is no third click handler since the plugin takes care of this
// with the built-in submitHandler callback function on the last form.
});
重要的是要记住我上面的click处理程序没有使用type="submit"按钮.这些是常规按钮，是form标签的外部或type="button".
Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".
仅最后一个表单上的按钮是常规的type="submit"按钮.那是因为我仅在最后一种形式上利用了插件的内置submitHandler回调函数.
Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.
概念验证"演示: http://jsfiddle.net/dNPFX/
"Proof of Concept" DEMO: http://jsfiddle.net/dNPFX/
另外，请参阅以供参考:
Also, see for reference:
https://stackoverflow.com/a/19546698/594235
引用OP:
"我要指定要验证的字段，创建规则，并根据错误与否来指定要在哪里放置类错误.使用Blueprint CSS框架，它已经为此类事情构建了类，但是，正如我所说的，我不知道如何使之工作."
"I want to designate the fields I want validate, create the rules and specify where I want to put errors with a class depending on whether they are errors or not. I'm using the Blueprint CSS framework and it already has classes built for such things but, as I said, I can't figure out how to make that work."
同样，这不是很具体.您是在谈论使用class设置规则还是使用自定义class进行错误指定?你尝试了什么? 借助jQuery Validate插件，您可以通过许多不同的方式指定规则，包括通过class .
Again, that's not very specific. Are you talking about using class to set the rules or using a custom class for error designation? What have you tried? The jQuery Validate plugin will allow you specify rules in many different ways including by class.
如果您参考文档，则可以看到有名为validClass和class名称，无论它们是否有效.
If you refer to the documentation, you can see that there are options called validClass and errorClass that will allow you to specify different class names used for fields when they are valid or not.
这篇关于包含多部分形式的jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
