Validate form before Bootstrap modal popup

Question

in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.

Form is:

i need to validate above form fields. if it is success then i need to display the modal and validate those fields.

Modal is:

My Code is:

    <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
            </div>
            <div class="modal-body">
                <div class="main-login pop-up-form">
                        <form class="" method="post" action="#"><br>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="name" id="name"  placeholder="Enter your Name"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="email" id="email"  placeholder="Enter your Email"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Address"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Phone No"/>
                                    </div>
                                </div>
                            </div>



                            <div class="form-group ">
                                <a href="#" target="_blank" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button">CLICK For Enquiry</a>
                            </div>

                        </form>
                    </div>

            </div>
            <div class="modal-footer">
                <div class="btn-group btn-group-justified" role="group" aria-label="group button">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" data-dismiss="modal"  role="button">Close</button>
                    </div>
                    <div class="btn-group btn-delete hidden" role="group">
                        <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal"  role="button">Delete</button>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>

Form code is showed below:

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        <input type="date" class="form-control" name="udate" id="udate"  placeholder="ghf" style="height: 39px !important;"  />
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <div class="cols-sm-10 food">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                        <select name="ftime" id="ftime">
                                            <option value="">---Select---</option>
                                            <option value="1">Breakfast</option>
                                            <option value="2">Lunch</option>
                                            <option value="3">Dinner</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10 food">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                                        <select id="ftype" name="ftype" onchange="validate()">
                                            <option value="">--select--</option>
                                            <option value="hai">V</option>
                                            <option value="hai">NV</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="amount" id="amount"  placeholder="hai" readonly="readonly" />
                                    </div>
                                </div>
                            </div>


                            <div class="form-group ">
                                <a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
                                validate2()">Submit</a>
                            </div>

                        </form>

i was not able to validate both the form and modal. please help me on this.. thanks in advance

Answer 1

Try this code:

First attach an click listener to your form submit button and validate your form when button is clicked and if validation is successful then you can show your modal.

    $(document).on('click', '#submit', function(e){
        e.preventDefault();
        var validated = validateform();
        if(validated){
            $('#modal').modal('show');
        }
    });

Write your validation logic inside this function and return true if validation passes tests.

    function validateform(){
        // logic for form validation
        // return true if validated successfully
    }

Answer 2

You can write a simple validation method

An example could be....

function checkValidation()
{
    var isValid = true;
    if($("#date").val() == null){
        isValid = false;
    }
    if($("#person").val() == null){
        isValid = false;
    }
    if($("#mail").val() == null){
        isValid = false;
    }
    return isValid;
}
if(checkValidation())
    $("#modalDialog").show();
else
    alert("Form is not valid");