Question

目前我在页面上有一组字段。单击该按钮并通过这些字段的验证时，将出现一个对话框模式框。此框有一些其他字段必须填写才能提交表单。

如何显示第一组字段是否已验证并打开对话框而不提交表单，直到对话框字段也已经过验证？

$( "#check-button" )  
    .button()  
    .click(function(e) { 
         // Section 1 
         $(':text, select, textarea').each(function() {  
             if ($(this).val().length == 0) {  
                     $(this).css('border', '2px solid red');  
                     e.preventDefault();  
             }  
         });  

         //Section 2
         //e.preventDefault();
         //$('#my_form').submit();
         //$( "#dialog-form" ).dialog( "open" );
});

我试过评论上面两节。第1部分突出显示所有内容，但未提交表单。第2节提交我的表格，但没有验证第二项。两个部分的输入都是同一形式的一部分。如果还有其他问题需要我解释一下，请告诉我。

总之，我正在寻找一种基于id验证每个项目的方法，一旦第一个集合通过，打开对话框，允许用户输入第二个集合并验证第二组字段。最后，提交表格。

提前感谢您的任何指导。

Answer 1

这样做的一种方法是只创建一个验证函数，如果所有字段看起来都是return true;，否则return false; ...如果它返回true，则显示对话框。

一个简单的例子（我做了我自己的变体，但你应该明白这一点）：http://jsfiddle.net/iwasrobbed/acU4Q/1/

顺便说一句，如果您在字段上检查0长度，请确保使用trim()，以便删除任何空格。您当前拥有它的方式，按空格键一次实际上意味着输入有效，即使该字段为空白。

Answer 2

您可以将所需的任何行为绑定到表单的提交操作。如果表格是通过AJAX进行的话我会怎么做：

$(document).ready(function() {
  $("form#first").submit(function() {
    if (validate(this)) { $("form#second").show(); }
    return false; // to prevent the form from going to your server
  });
  $("form#second").submit(function() {
    var form = $(this);
    if (validate(form)) {
      $.ajax({
        url: form.attr("action"),
        data: form.serialize() + $("form#first").serialize(),
        type: form.attr("method"),
        dataType: "script"
      });
    }
    return false;
  });
});

基本上，如果第一个表单有效，则打开第二个表单。然后，如果第二个表单有效，则从两个表单提交数据。

如果您想同步执行此操作，我的理解是您可以将async的{{1}}选项设置为$.ajax，将false操作设置为dataType虽然我自己从未这样做过。

jquery在提交表单之前在对话框中验证表单

2 个答案: