javascript - 在使用 JavaScript 提交表单之前/未提交表单时验证表单元素

Question

我有一个 HTML 表单，其元素显示在各种 Bootstrap 模式中。第一个模式有一个文本框输入，以及一个“下一步”按钮来打开下一个模式。当按下“下一步”按钮时。我想检查文本框是否为空，并触发验证消息。直到最后才提交表格。到目前为止我尝试过的所有方法都不起作用。

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('');
        }
    });

HTML

<form name="add_assistant" method="post" id="form_add_assistant">
        <div class="modal-body">
            <div class="step">
                <span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
            </div>
            <div class="pl-3 pt-1">
                <div>
                    <input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
                    <button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
                </div>
                <input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
            </div>
        </div>

... form continues in other modals

Answer 1

您的 JS 代码可能正在与 Bootstrap 争夺该按钮的控制权。为了解决这个问题并进行验证，您可以尝试修改代码以添加中间步骤/临时按钮，以在实际提交之前首先帮助进行验证。所以像这样:

Javascript/jQuery 代码

$("#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 name="add_assistant" method="post" id="form_add_assistant">
    <div class="modal-body">
        <div class="step">
            <span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
        </div>
        <div class="pl-3 pt-1">
            <div>
                <input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />

                <!-- Feel free to change the id name. This is the button the user sees. It's only purpose is to give your function above full control to it and prevent Bootstrap from touching it and jumping to the next modal without having the user fix the validation failure first: -->
                <button type="button" id="my_temp_button" class="btn btn-outline-secondary btn">Look up user</button>

                <!-- Hide the real button from the user: -->
                <div style="display:none">
                    <button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
                </div>
            </div>
            <input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
        </div>
    </div>
    ...