I have a beautiful form that has a great validation with jQuery, but where do I put the function that should run after fom was validated?

here is the form:

<form id="myForm"  novalidate>
    <div >
       
        <div >
            <label for="text-1650256863373" >Name<span >*</span></label>
            <div >
                <input type="text"  name="text-1650256863373" access="false" maxlength="50" id="text-1650256863373" required="required" aria-required="true">
            </div>
        </div>
        <div >
            <label for="text-1650256864829" >E-mail:<span >*</span></label>
            <div >
                <input type="email"  name="text-1650256864829" access="false" maxlength="30" id="text-1650256864829" required="required" aria-required="true">
                <div >e-mail</div>
            </div>
        </div>

        <div >
            <label for="text-1650256865677" >Phone<span >*</span></label>
            <div >
                <div >
                    <div > 1</div>

                    <input type="tel"  name="text-1650256865677" access="false" maxlength="15" id="text-1650256865677" required="required" aria-required="true">
                </div>
               
            </div>
            </div>
        
                <div >
                    <button type="submit"   name="button-1650256992197" access="false" style="success" id="button-1650256992197">Подписать</button>
                </div>
            </div>
    
</form>

here is my javascript validation:

  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (() => {
        'use strict';

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation');

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms).forEach((form) => {
        form.addEventListener('submit', (event) => {
        if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
    }
    form.classList.add('was-validated');
    }, false);
    });
    })();


</script>

Now when user clicks one the button Submit, if the form is validated I need to show an alert window with message. Where I put it?

CodePudding user response：

I assume your checkValidity() is a boolean function.

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
    'use strict';
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    const forms = document.querySelectorAll('.needs-validation');
    // Loop over them and prevent submission
    Array.prototype.slice.call(forms).forEach((form) => {
        form.addEventListener('submit', (event) => {
            if(!form.checkValidity()) {
                // When is invalid
                alert('invalid');
                event.preventDefault();
                event.stopPropagation();
            } else {
                // When is valid
                alert('valid');
            }
            // On form submit whether valid or invalid
            alert('Was validated');
            form.classList.add('was-validated');
        }, false);
    });
})();
</script>

CodePudding user response：

Maybe you could just try to add the alert that you want at the end of your script ? It gonna be display if you script go at the end of it logic !

 <script>
// Example starter JavaScript for disabling form submissions if there are     invalid fields
(() => {
    'use strict';

// Fetch all the forms we want to apply custom Bootstrap validation  styles to
const forms = document.querySelectorAll('.needs-validation');

// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
    form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
alert('What you want to say to user');
})();


</script>

I guess you can put it where you want, but after your logic to see if it's run fully and correctly.