Question

我有一个接受2个字段并填写每个字段的表格是强制性的。我已经使用了必需的属性来实现这个目标。

Enter A:<input type="text" name="a" required><br>

Enter B:<input type="text" name="b" required><br>

<button type="submit" class="sub" value="submit">

所需参数保存代码行以检查空白值，如果没有填写任何人点击它显示的提交按钮的值，请填写此字段。

但是我想在提交表单后立即禁用提交按钮。

我正在使用jquery

$('.sub').click(function(){

       $('.sub').prop('disabled', true);
       $('#dvLoading').show();

});

但问题是即使字段未填写，单击提交按钮时按钮也会被禁用。

在这种情况下可以做什么，以便只有在填写每个字段并提交表单时才会禁用该按钮。

Answer 1

您有两个选择，第一个是订阅submit事件，您的处理程序无法触发，直到表单无效为止：

＆＃13;

$(function () {
	$('#myform').submit(function () {
		$('.submit').prop('disabled', true);
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
    <input type="text" required>
    <input type="text" required>
    <input type="submit" value="submit" class="submit">
</form>

＆＃13;

第二个选项是使用checkValidity()确保表单在禁用之前有效：

＆＃13;

$(function () {
        $('.submit').click(function () {
            var form = document.getElementById("myform");
            if (form.checkValidity() !== false) {
                $('.submit').prop('disabled', true);
            }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
    <input type="text" required>
    <input type="text" required>
    <input type="submit" value="submit" class="submit">
</form>

＆＃13;

如何在提交按钮上一起使用dvloading和required

1 个答案: