HTML表单提交两次

Question

我已经阅读了大多数具有类似问题的帖子，但似乎找不到与我的情况完全匹配的示例或答案。

我有一个包含一些必填字段的表单。当表单提交时，我希望进行验证。但我不想要默认的“提交”按钮或操作。相反，我有一个通用的 Button 对象。

当我提到“验证”时，我指的是在未选择/填充标记为“必需”的输入时发生的默认操作。第一个问题，这个验证可以用一种方法“调用”吗？因为我相信我的问题是除非单击提交按钮，否则我无法启动它。

因此，在我的代码中，我有一个隐藏的提交按钮，然后是一个通用按钮，它在隐藏的提交上执行“click()”。这会触发验证，但我也相信它会提交表单。我将表单的 onsubmit 值设置为“return postCheckout();”，并且该函数执行“return false”，但我认为它发生得太晚了，在表单 submit() 触发然后函数触发之后......我需要一条出路！

HTML 标记：

<form id="frmCheckout" onsubmit="return postCheckout();">
<table id="tblHeader">
<tr>
<td>
<select name="tblDevelopers" id="tblDevelopers" required>
<option value="" disabled selected>Who are you?</option>
<option value="1">Black</option>
<option value="2">Buntjer</option>
<option value="3">Dwyer</option><
</select>
</td>
</tr>
<tr>
<td>
<span style="display: none;">
<input type="submit" id="btn_frmCheckout" />
</span>
<button onclick="$( '#btn_frmCheckout' ).click();">Check Out</button>
</td>
</tr>  
</table>
</form>

脚本：

function postCheckout() {
  $( "#dialog-PleaseWait" ).dialog({
    show: { effect: "highlight", color: "#99ccff", duration: "10000"},
    resizable: false,
    height:200,
    width:260,
    modal: false,
              buttons:
          {
            "OK": function()
            { $( this ).dialog( "close" );
            }
          }
  });
  $( ".ui-dialog-title" ).text("Please wait");
  $( ".ui-dialog-content" ).html("Copying Template Files. <img style='border:0; padding-left: 10px; padding-top:10px; padding-bottom:0px;' src='/htmlFiles/loader.gif' />");
  $( "#dialog-PleaseWait" ).dialog("open");

  $.ajax({
    type:'POST',
    url: 'checkout',
    data:$('#frmCheckout').serialize(), success: function() {window.close();}
    });

  return false;
}

Answer 1

尝试在 on submit 函数中使用 event.preventDefault()。而不是 onsubmit 属性。

$(document).on('submit','#frmCheckout',function(event){
   event.preventDefault();
   $( "#dialog-PleaseWait" ).dialog({
    show: { effect: "highlight", color: "#99ccff", duration: "10000"},
    resizable: false,
    height:200,
    width:260,
    modal: false,
              buttons:
          {
            "OK": function()
            { $( this ).dialog( "close" );
            }
          }
  });
  $( ".ui-dialog-title" ).text("Please wait");
  $( ".ui-dialog-content" ).html("Copying Template Files. <img style='border:0; padding-left: 10px; padding-top:10px; padding-bottom:0px;' src='/htmlFiles/loader.gif' />");
  $( "#dialog-PleaseWait" ).dialog("open");

  var validator = $("#frmCheckout").validate(options);
  if (validator.form()) {
    $.ajax({
        type:'POST',
        url: 'checkout',
        data:$('#frmCheckout').serialize(), success: function() {window.close();}
    });
  }
  return false;
});

Answer 2

jquery checkValidity() 函数对我来说是缺失的部分。几乎，因为它不会在必填字段上为用户显示工具提示/标题，但这是验证并在表单上执行 AJAX 发布的代码。

function postCheckout() {

  if($('#frmCheckout')[0].checkValidity()) {

  $( "#dialog-PleaseWait" ).dialog({
    show: { effect: "highlight", color: "#99ccff", duration: "10000"},
    resizable: false,
    height:200,
    width:260,
    modal: false,
              buttons:
          {
            "OK": function()
            { $( this ).dialog( "close" );
            }
          }
  });
  $( ".ui-dialog-title" ).text("Please wait");
  $( ".ui-dialog-content" ).html("Copying Template Files. <img style='border:0; padding-left: 10px; padding-top:10px; padding-bottom:0px;' src='/htmlFiles/loader.gif' />");
  $( "#dialog-PleaseWait" ).dialog("open");

  $.ajax({
    type:'POST',
    url: 'checkout',
    data:$('#frmCheckout').serialize(), success: function() {window.close();}
    });

  }
  return false;
}

HTML 表单没有方法、操作或 onsubmit 属性，也没有提交按钮。我有一个调用 postCheckout() onclick() 的通用按钮。

感谢所有帮助和有关“checkValidity()”的线索。现在深入挖掘，看看我是否可以显示默认的错误标题。