通过jquery提交表单时,必需在html 5中不起作用?

时间:2016-06-28 06:12:46

标签: jquery html5

必需的属性在html页面中不起作用。我使用我的提交按钮不允许双击JQuery.It工作正常但如果用户提交带有空字段的表单则需要工作。如何解决这个问题?对于所有帮助提前谢谢。

我的代码是:

$(function() {
  $('#btnSubmitInTimesheet').on('click', function() {
    console.log("inside clickkk");
    $(this).val('Please wait ...')
      .attr('disabled', 'disabled');
    setTimeout('$("#btnSubmitInTimesheet").removeAttr("disabled")', 1000);
    $(this).val('Submit')
    $('#timesheetForm').submit();

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<td>
  <input type="text" required>
</td>
<td>
  <input type="submit" id="btnSubmitInTimesheet">
</td>

2 个答案:

答案 0 :(得分:0)

来自html5 required and jquery submit()

看起来通过jQuery对form.submit()或form.trigger(&#39; submit&#39;)的任何调用都会绕过必要的字段检查。我通过使用普通按钮替换提交按钮并隐藏单独的提交按钮来修复它,以便可以通过jQuery触发它的onclick

<script>
$(document).ready(function() {
    $(document).on("click","#btnSubmitInTimesheet",function(e) {
        $(this).val("Please wait ...").attr("disabled","disabled");
        setTimeout(function() {
            $(this).val('Submit');
            $("#btnSubmitInTimesheet").removeAttr("disabled");
            $("#realSubmit").trigger("click");
        }, 1000);
    });
});
</script>

Html正文:

<body>
<form id="timesheetForm" action="someOtherPage.html">
<input type="submit" id="realSubmit" style="display:none">
<input type="button" id="btnSubmitInTimesheet" value="Blah?">
<input name="foo" type="text" required>
</form>
</body>

答案 1 :(得分:-1)

$('#btnSubmitInTimesheet').click(function(){
  console.log("inside clickkk");
  $(this).val('Please wait ...').attr('disabled','disabled');
  setTimeout('$("#btnSubmitInTimesheet").removeAttr("disabled")', 1000);
  $(this).val('Submit');
  $('#timesheetForm').submit();
}

试试这个。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

把它放在标题