Question

我有一个非常大的表格，包含大约40个问题。我把问题分成几个部分，每部分10个，每个部分都包含在一个div中。

我正在使用jQuery来滑动div进出

 $('a.nextform').click(function(e){  
       $('.hold-all').animate({"left": "-=690"}, 500);
        e.preventDefault();
    })
 $('a.backform').click(function(e){  
       $('.hold-all').animate({"left": "+=690"}, 500);
       e.preventDefault();
    })

我想以某种方式说，如果已经完成了已重新填写的字段HAVENT，则不允许用户单击下一步，这是否可以使用jQuery？

Answer 1

为输入提供ID，例如<input id='name' type='text'/>

然后使用

检查它是否为空

$('#name').val()

例如

if($('#name').val() != ''){
//do
}
else
{
//dont do
}

Answer 2

您可以使用JQuery在按钮输入上设置属性disabled =“disabled”：see w3schools例如$(button).attr('disabled', 'disabled')。您还可以在$(form).submit上设置处理程序并使用preventDefault并返回false。您也可以在上面的点击处理程序上执行return false，以防止执行更多点击代码。

Answer 3

您可能也希望将验证分解为阶段，即在当前div上的输入都经过验证之前不要移动到下一个div。

您可以使用各种用于jquery表单验证的插件，您可以从http://docs.jquery.com/Plugins/Validation开始。

然后你可以使用.valid（）来检查是继续前进还是显示错误，这是一个快速粗略的例子：

$('a.nextform').click(function(e){ 
if ("#myform").valid()) {
$('.hold-all').animate({"left": "-=690"}, 500);
    e.preventDefault();
}
}
...

Answer 4

当然。遍历每个输入字段 - 您可以使用字段集对它们进行分组，并使用类似.children（'input，textarea'）的内容 - 检查每个输入并验证给定输入是否有值。

Answer 5

如果您手动为所有表单字段编写，那么维护起来会很困难。在列表中添加或删除字段很快就会使该过程难以维护，管理和跟踪。

您面临的问题是一个常见的问题，也是一个解决的问题：'验证'

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

基本上将css类'required'添加到必需的任何字段中。调用运行表单上的验证插件或表单的容器。

当用户点击Next调用$（“form＃questions”）时，验证（）

如果validate返回true，则滑动下一个div。如果返回false则不。 validate插件还可以在验证失败的字段末尾添加验证消息，和/或提供失败约束的验证摘要消息：有关详细信息，请参阅文档。

http://jquery.bassistance.de/validate/demo/

除非所有表单字段都已完成，否则不要执行jQuery

5 个答案: