Validate a form element without/before submitting the form with JavaScript

Question

I have an HTML form that has its elements displayed in various Bootstrap modals. The first modal has a text box input that and a "Next" button to open the next modal. When the "next" button is pressed. I want to check if the text box is empty, and trigger a validation message. The form does not get submitted until the very end. Everything I've tried has not worked so far.

Javascript/jQuery code

$("#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

Your JS code is probably fighting with Bootstrap for control of that button. To get around that, and have your validation, you could try modifying your code to have a middle step / temporary button to help with validation first before actually submitting. So something like this:

Javascript/jQuery code

$("#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>
    ...

Answer 2

Have you tried adding a trap for the submit event itself?

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

References:

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

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