在不使用JavaScript提交表单之前验证表单元素

我有一个HTML表单，它的元素以各种引导模式显示。第一个模态有一个输入的文本框和一个打开下一个模态的“下一步”按钮。按下“下一步”按钮时。我想检查文本框是否为空，并触发验证消息。表格直到最后才提交。到目前为止，我所尝试的一切都没有奏效

Javascript/jQuery代码

$("#add_assistant_next").click(function () {
        var textInput = document.getElementById('add_assistant_user');
        var text = textInput.value;

        if (text === "") {
            textInput.setCustomValidity('Please fill out this field.');
            textInput.checkValidity();
            var form = $('#form_add_assistant');
            form.find(':submit').click();
        } else {
            textInput.setCustomValidity('');
        }
    });

$("#my_temp_button").click(function () {
    var textInput = document.getElementById('add_assistant_user');
    var text = textInput.value;

    // Might also want to handle null and undefined cases?
    if (text === "" || text === undefined || text === null) {
        // I'm assuming if it's empty, it doesn't pass validation,
        // so we just display this warning and wait for the user to fix it:
        textInput.setCustomValidity('Please fill out this field.');
    } else {
        // it's not empty so validate:
        if (textInput.checkValidity()) {
            // it passed validation, so ok to submit. 

            // call the real button:
            $('#add_assistant_next').click();

            // do you need this?
            var form = $('#form_add_assistant');
            form.find(':submit').click();
        } else {
            // it failed validation, so display another error?
            textInput.setCustomValidity('Try again.');
        }
    }
});

HTML

---

您的JS代码可能正在与引导程序争夺该按钮的控制权。为了解决这个问题并进行验证，您可以尝试修改代码，在实际提交之前使用中间步骤/临时按钮来帮助验证。比如说：

Javascript/jQuery代码

$("#add_assistant_next").click(function () {
        var textInput = document.getElementById('add_assistant_user');
        var text = textInput.value;

        if (text === "") {
            textInput.setCustomValidity('Please fill out this field.');
            textInput.checkValidity();
            var form = $('#form_add_assistant');
            form.find(':submit').click();
        } else {
            textInput.setCustomValidity('');
        }
    });

$("#my_temp_button").click(function () {
    var textInput = document.getElementById('add_assistant_user');
    var text = textInput.value;

    // Might also want to handle null and undefined cases?
    if (text === "" || text === undefined || text === null) {
        // I'm assuming if it's empty, it doesn't pass validation,
        // so we just display this warning and wait for the user to fix it:
        textInput.setCustomValidity('Please fill out this field.');
    } else {
        // it's not empty so validate:
        if (textInput.checkValidity()) {
            // it passed validation, so ok to submit. 

            // call the real button:
            $('#add_assistant_next').click();

            // do you need this?
            var form = $('#form_add_assistant');
            form.find(':submit').click();
        } else {
            // it failed validation, so display another error?
            textInput.setCustomValidity('Try again.');
        }
    }
});

HTML:

---

您是否尝试过为提交事件本身添加陷阱

$('#form_add_assistant').submit(function(evt){
    //do your validation here
    if (validation fails){
        return false; // OR, alternatively, `evt.preventDefault()`
    }
    //form submission will continue if not returned false
});

参考资料：

---

您当前使用此代码得到了什么？没有验证文本？它是否提交空值？@KiraMiller按下“下一步”按钮，我想表单将被提交？模式将关闭。没有错误消息那么，如果您删除上面的JavaScript代码，保存并刷新它，并尝试单击“查找用户”按钮，模态会关闭吗？正确，模态会关闭并打开下一个模态