javascript - 如何在提交按钮上同时使用 dvloading 和 required

Question

我有一个接受 2 个字段的表格，并且每个字段都是必填字段。我已使用 required 属性来实现此目的。

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在表单无效之前，事件和处理程序不会被触发:

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

<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>

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

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

<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>