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

【问题标题】：Validate a form element without/before submitting the form with JavaScript在不使用 JavaScript 提交表单之前/之前验证表单元素
【发布时间】：2019-06-27 22:56:29
【问题描述】：

我有一个 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

【问题讨论】：

您目前通过此代码得到什么？没有验证文本？是否提交空值？
@KiraMiller 将按下下一个按钮，将提交表单（我认为？）并且模式将关闭。没有错误信息
那么，如果你删除上面的 JavaScript 代码，保存并刷新它，然后尝试点击“查找用户”按钮，我是否正确，模式会关闭吗？
正确，模态将关闭并打开下一个模态

标签： javascript jquery html validation

【解决方案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>
    ...

【讨论】：

【解决方案2】：

您是否尝试为submit 事件本身添加陷阱？

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

参考资料：

https://api.jquery.com/submit/

How to conduct manual form validation via jQuery .submit()

【讨论】：