CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Nikita
Nikita

Reputation: 75

Bootstrap: Modal closing while inputs not filled

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>

Upvotes: 1

Views: 2680

Answers (3)

Derlin
Derlin

Reputation: 9891

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.

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5778

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.

Upvotes: 0

Sahadev
Sahadev

Reputation: 1448

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")
            }
        }

Upvotes: 1

Related Questions