Bootstrap: Modal closing while inputs not filled

Question

I'm making modal using Bootstrap. I need to prevent modal closing while required inputs are not filled or requirements for inputs are not met. And how can i realise the requirements for the inputs? Something like RegExp?

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Adding a user</h4>
            </div>
            <form name="userAdding">
                <div class="modal-body">
                    <input type="text" required placeholder="Name" id="inputName">
                    <br>
                    <input type="text" required placeholder="Username" id="inputUsername">
                    <br>
                    <input type="email" required placeholder="Email" id="inputEmail">
                    <br>
                    <input type="text" placeholder="Street" id="inputStreet">
                    <br>
                    <input type="text" placeholder="Suite" id="inputSuite">
                    <br>
                    <input type="text" placeholder="City" id="inputCity">
                    <br>
                    <input type="number" placeholder="Zipcode" id="inputZipcode">
                    <br>
                    <input type="number" placeholder="Lat" id="inputLat">
                    <br>
                    <input type="number" placeholder="Lng" id="inputLng">
                    <br>
                    <input type="number" placeholder="Phone" id="inputPhone">
                    <br>
                    <input type="text" placeholder="Website" id="inputWebsite">
                    <br>
                    <input type="text" required placeholder="Companyname" id="inputCompname">
                    <br>
                    <input type="text" placeholder="Catchphrase" id="inputCatchphrase">
                    <br>
                    <input type="text" placeholder="bs" id="inputBs">
                 </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addUser()">Submit</button>
            </div>
        </div>
    </div>
</div>

Please share your `addUser()` code – Bhavana Dec 22 '16 at 07:49 — Bhavana, Dec 22 '16 at 07:49

score 1 · Accepted Answer · answered Dec 22 '16 at 07:52

Remove data-dismiss from submit button and then I have only provided here for email. Rest of all you can do like this:

 function addUser(){
            var email = document.getElementById('inputEmail').value;
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if(re.test(email)){
                $('#myModal').modal('hide');
                console.log(email + " Success");
            }else{
                console.log(email + " Failed")
            }
        }

it's just validating regex if any other field's validation cause errors model will close again as we have only check for email regex in this case we can do something like this function addUser() { $("form").validate({ showErrors: function (errorMap, errorList) { var errors = this.numberOfInvalids(); if (errors) { return false; } }); } — Curiousdev, Dec 22 '16 at 09:50

score 0 · Answer 2 · edited May 23 '17 at 10:30

For your first requirement (don't close the modal), you can: 1. remove the close button in the header, 2. disable the close button in the footer until all the inputs are filled.

For the latter, multiple possibilities:

disable the button by default, then bind a function to the change events of the inputs. Inside it, check all the inputs and set the button state accordingly.
in addUser(), check the validity of the inputs. If they are incorrect, use one of the solutions described in this stackoverflow to cancel the close event.

score 0 · Answer 3 · answered Dec 22 '16 at 08:01

function addUser()
{
   $("form").validate({
        showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();
            if (errors) {
                return false;
             }  
        });
}

add code to addUser function its restricting model to hide when there is any validation occurs.

Bootstrap: Modal closing while inputs not filled

3 Answers3