在表单验证后单击时禁用提交按钮

Disable submit button on click after form validation

本文关键字：提交 按钮 单击 表单 验证      更新时间：2023-09-26

我有一个表单，它有一个jquery表单验证。。我需要的是在验证完成后提交表单时，提交按钮应该被禁用。。

<form action="#" method="post" id="myform" name="myform">
    Location: <input name="location" type="text" />
    Site: <input name="site" type="text" />
    Age: <input name="age" type="text" />
    Gender <input name="gender" type="text" />
    <input name="button" type="submit" class="myButton" id="button" value="Submit" />
</form>

这是我的表格JsFiddle

不确定为什么要禁用提交按钮，但使用jQuery可以进行

$('input[type="submit"]').prop('disabled',true);

通常情况下，您要么没有提交按钮，要么提交表单，页面就会重新加载！

更新

要通过在评论中刷新页面来阻止人们转发值，请将用户重定向到不发布值的页面！

 header('/same_page.php');

你想对form.submit执行操作。不确定是否需要在那里添加form.valid（）作为检查，但我总是这样做。之后，您可以返回true或false。

  • True：浏览器继续执行表单中指定的链接和操作
  • False：浏览器停止（当您出现验证错误时）

这里的代码：

$('#myform').submit(function() {
    if (!$('#myform').valid()) return false;
    $('#myform input[type=submit]').attr("disabled", "disabled");
    return true;
});

我还用那个代码更新了你的fiddle，所以你可以试用

验证表单后，使用：

$( "#button" ).click(function(event) {
        if($('#myform').valid()) {
            $(event.target).attr("disabled", "disabled");
        }
    });

如果您想在想要验证的表单有效后禁用，那么您可以禁用像下面这样的提交按钮

$("#myForm").validate({
  submitHandler: function(form) {
    // do other stuff for a valid form
    $('#myform input[type=submit]').attr("disabled", "disabled");
    form.submit();
  }
});
相关文章：