Solution 1 :

You’ll have to programatically show the modal instead of relying on the automatic behaviour of data-toggle="modal" data-target="#exampleModal".

Remove the data-toggle and data-target attributes on your button and add this somewhere in your submitClick function’s if (formValidation() == true) branch, preferably after the POST request has completed (but that’s up to you really)

$('#exampleModal').modal()

See https://getbootstrap.com/docs/4.4/components/modal/#via-javascript

Problem :

I have this form that users have to fill. When they don’t fill the form or if they don’t fill it correctly, the request POST is not loading. The request post allows me to save their name and email.

I want to show a bootstrap modal when the form is filled correctly by clicking the button “Download now”.
The bootstrap modal says “Congratulations.” It is like a success modal to say they have correctly filled the form.

But I have an issue: when nothing is filled in the form or either when it is not filled correctly, the modal is still showing when I click the button “Download now”.

How can I make my modal understand that I want it to show only when the user succeed in filling correctly the form? I want the modal to pay attention to the function formValidation() before showing when I am clicking the button “Download now”.

HTML CODE:

<form name="myForm" style="width:100%;" id="submit_request_form" enctype="multipart/form-data" onsubmit="return submitClick();">
    <div class="form-group">
        <label>First and last name:</label>
        <input type="text" class="form-control" id="id_name" name="user_name" placeholder="Enter first & last name" required>
    </div>
    <div class="form-group">
        <label>Email address:</label>
        <input type="email" id="id_email" name="user_email" class="form-control" placeholder="Enter email" required>
        <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Download&nbsp;now</button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success" role="alert">
                            Congratulations. You will receive an email in few minutes!
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
</form>

Javascript:

<script>
function submitClick() {
    if (formValidation() == true) {
        //POST REQUEST
        return true;
    } else {
        return false;
    }
}
function formValidation() {

    if (document.myForm.user_name.value == "") {
    alert("Please fill in your Name!");
    return false;
    }

    // Validate length of the Name LastName
    else if ((document.myForm.user_name.value.length) > 50) {
    alert("The name is too long!");
    return false;
    }

    // Validate emails
    else if (!/^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/.test(myForm.user_email.value)) //Regular expressions to validate email
    {
    alert("Enter Valid Email Address!");
    return false;
    }

    return true;
}
</script>

By

Leave a Reply

Your email address will not be published. Required fields are marked *