Validate first before calling Bootstrap Modal

Question

I'm new to Modals and jQuery. I need some help. I have a form and I am using a LiveValidation Library and also I have Bootstrap Modal. I'm using Modal to show the users input from the form and has a confirm submit button.

The current setting is. When the user filled all fields the Modal will appear and showing the user's input and has confirm button to submit. Now, I added a validation and I'm getting some logic error or improper code arrangement?

When the user didn't filled all the fields the validation kicks off (which I want) but also my Modal comes up too. If click submit button inside the Modal it will not submit since the user hasn't filled all the fields in the form which is ok.

I just want my Modal to NOT show up if all fields is not filled up or validated.

I have submit button on the form which Calls the Validation and Modal at the same time and I'm aware that it is the cause. I just need help how to arrange or restructure my code?

Here's my HTML

<!-- Start Form -->
        <form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
        <input type="hidden" name="action" value="add_form" /> 

                      <div class="required-field-block">
                        <label>Last Name</label><span class="label label-danger">*required</span>
                        <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
                      </div>

                      <div class="form-group">
                        <label>First Name</label><span class="label label-danger">*required</span>
                        <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
                      </div>

                      <div class="form-group">
                        <label>Address Information</label>
                      </div>

                      <div class="col-lg-12">
                          <div class="form-group">
                               <select class="selectpicker" id="island" name="island" onchange="document.getElementById('island2').value=this.options[this.selectedIndex].text">
                                <option value="">Choose One</option>
                                <option value="1">Luzon</option>
                                <option value="2">Visayas</option>
                                <option value="3">Mindanao</option>
                              </select>
                              <span class="label label-primary">Island</span><span class="label label-danger">*required</span>
                          </div>

                          <div class="form-group">
                                 <select class="selectpicker" id="region" name="region" onchange="document.getElementById('region2').value=this.options[this.selectedIndex].text" data-live-search="true">
                                  <option value="">Choose One</option>
                                </select>
                                <span class="label label-primary">Region</span><span class="label label-danger">*required</span>
                          </div>

                          <div class="form-group">
                                 <select class="selectpicker" id="province" name="province" onchange="document.getElementById('province2').value=this.options[this.selectedIndex].text" data-live-search="true">
                                  <option value="">Choose One</option>
                                </select>
                                <span class="label label-primary">Province</span><span class="label label-danger">*required</span>
                          </div>

                          <div class="form-group">
                                 <select class="selectpicker" id="city" name="city" onchange="document.getElementById('city2').value=this.options[this.selectedIndex].text" data-live-search="true">
                                  <option value="">Choose One</option>
                                </select>
                                <span class="label label-primary">City</span><span class="label label-danger">*required</span>
                          </div>

                          <div class="form-group">
                                 <select class="selectpicker" id="barangay" name="barangay" onchange="document.getElementById('barangay2').value=this.options[this.selectedIndex].text" data-live-search="true">
                                  <option value="">Choose One</option>
                                </select>
                                <span class="label label-primary">Barangay</span><span class="label label-danger">*required</span>
                          </div>
                      </div>  

                      <div class="form-group">
                        <label>Address</label><span class="label label-danger">*required</span>
                        <input class="form-control" placeholder="Enter Address (ex. 1234 Sample Street)" name="address" id="address">
                      </div>

                      <div class="form-group">
                             <select class="selectpicker" id="gender" name="gender">
                              <option value="">Choose One</option>
                              <option value="Male">Male</option>
                              <option value="Female">Female</option>
                            </select>
                             <span class="label label-primary">Gender</span><span class="label label-danger">*required</span>
                      </div>


                      <div class="form-group">
                        <label>Birthdate</label><span class="label label-danger">*required</span>
                        <input class="form-control" placeholder="Enter Select Date" name="birthdate" id="birthdate">
                      </div>

                      <!-- Hidden Fields to Get Island, Region, Province, City, Barangay as String -->
                      <input type="hidden" name="island2" id="island2" /> 
                      <input type="hidden" name="region2" id="region2" /> 
                      <input type="hidden" name="province2" id="province2" /> 
                      <input type="hidden" name="city2" id="city2" /> 
                      <input type="hidden" name="barangay2" id="barangay2" />
                      <input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" onclick="checkInput();";/>
                      <input type="button" name="btn" value="Reset" onclick="window.location='index.php'" class="btn btn-default" data-modal-type="confirm"/>

                      <!-- Start Modal -->
                    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <strong>Confirm Submit</strong> 
                                    </div>
                                    <div class="modal-body">
                                        Are you sure you want to submit the following details?

                                        <!-- We display the details entered by the user here -->
                                        <table class="table">
                                            <tr>
                                                <th>Last Name</th>
                                                <td id="modal_lastname"></td>
                                            </tr>
                                            <tr>
                                                <th>First Name</th>
                                                <td id="modal_firstname"></td>
                                            </tr>
                                            <tr>
                                                <th>Island</th>
                                                <td id="modal_island"></td>
                                            </tr>
                                            <tr>
                                                <th>Region</th>
                                                <td id="modal_region"></td>
                                            </tr>
                                            <tr>
                                                <th>Province</th>
                                                <td id="modal_province"></td>
                                            </tr>
                                            <tr>
                                                <th>City</th>
                                                <td id="modal_city"></td>
                                            </tr>
                                            <tr>
                                                <th>Barangay</th>
                                                <td id="modal_barangay"></td>
                                            </tr>
                                            <tr>
                                                <th>Address</th>
                                                <td id="modal_address"></td>
                                            </tr>
                                            <tr>
                                                <th>Gender</th>
                                                <td id="modal_gender"></td>
                                            </tr>
                                            <tr>
                                                <th>Birthdate</th>
                                                <td id="modal_birthdate"></td>
                                            </tr>
                                        </table>
                                    </div>
                                     <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                        <input type="submit" id="submit" name="btn" value="Submit" class="btn btn-success" />
                                    </div>
                            </div>
                          </div>
                    </div>  
                    <!-- End Modal -->

                    </form>
                    <!-- End Form -->

Here's my Validation

<script type="text/javascript">
function checkInput() 
{
    var lastname = new LiveValidation( 'lastname', {onlyOnSubmit: true } );
    lastname.add( Validate.Presence );
    var firstname = new LiveValidation( 'firstname', {onlyOnSubmit: true } );
    firstname.add( Validate.Presence );
    var island = new LiveValidation( 'island', {onlyOnSubmit: true } );
    island.add( Validate.Presence );
    var region = new LiveValidation( 'region', {onlyOnSubmit: true } );
    region.add( Validate.Presence );
    var province = new LiveValidation( 'province', {onlyOnSubmit: true } );
    province.add( Validate.Presence );
    var city = new LiveValidation( 'city', {onlyOnSubmit: true } );
    city.add( Validate.Presence );
    var barangay = new LiveValidation( 'barangay', {onlyOnSubmit: true } );
    barangay.add( Validate.Presence );
    var address = new LiveValidation( 'address', {onlyOnSubmit: true } );
    address.add( Validate.Presence );
    var gender = new LiveValidation( 'gender', {onlyOnSubmit: true } );
    gender.add( Validate.Presence );
    var birthdate = new LiveValidation( 'birthdate', {onlyOnSubmit: true } );
    birthdate.add( Validate.Presence );

    var automaticOnSubmit = lastname.form.onsubmit;
    lastname.form.onclick = function(){
    var valid = automaticOnSubmit();
    if(valid)alert('The form is valid!');
    return false;
    }
}

</script>

Here's just a script that will get the input from the form and copy it to the modal

<script type="text/javascript">
/* Get input and show to modal */
$('#submitBtn').click(function() {
 /* when the button in the form, display the entered values in the modal */
 $('#modal_lastname').html($('#lastname').val());
 $('#modal_firstname').html($('#firstname').val());
 $('#modal_island').html($('#island2').val());
 $('#modal_region').html($('#region2').val());
 $('#modal_province').html($('#province2').val());
 $('#modal_city').html($('#city2').val());
 $('#modal_barangay').html($('#barangay2').val());
 $('#modal_address').html($('#address').val());
 $('#modal_gender').html($('#gender').val());
 $('#modal_birthdate').html($('#birthdate').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    $('#formfield').submit();
});
</script>

Answer 1

You already return false if your validation fails, so you just need to check that before showing the modal (return true if it passes). Instead of calling checkInput() directly from submit, call another function that calls checkInput() inside.

<input type="button" name="btn" value="Submit" id="submitBtn" class="btn btn-default" onclick="submitForm();";/>

function submitForm() {
    var valid = checkInput();
    if (valid) {
        $('#confirm-submit').modal('show');
    }
}