Bootstrap Modal Styled Form Validation

Question

I'm trying to modify a Bootstrap modal so the form shows errors and does not submit when the form inputs are empty. I know about the "required" command as another possibility but I want to style it so it looks a little nicer. I simply copied and pasted what someone else has done and it works on their site ( http://formvalidation.io/examples/modal/#resetting-form-when-showing-the-modal ) but not mine. When I click submit with empty fields, the modal closes.

Here is my code:

HTML:

<button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button>

<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
    <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>
            <h5 class="modal-title">Request an Appointment</h5>
        </div>

        <div class="modal-body">
            <!-- The form is placed inside the body of modal -->
            <form id="loginForm" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-3 control-label">Full Name</label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" name="name" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-3 control-label">Phone Number</label>
                    <div class="col-xs-5">
                        <input type="number" class="form-control" name="number" placeholder="(888)888-8888" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-5 col-xs-offset-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JS:

$(document).ready(function() {
$('#loginForm').formValidation({
    framework: 'bootstrap',
    excluded: ':disabled',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        name: {
            validators: {
                notEmpty: {
                    message: 'The name is required'
                }
            }
        },
        number: {
            validators: {
                notEmpty: {
                    message: 'The phone number is required'
                }
            }
        }
    }
});
});

Answer 1

You forget to include one required JS library which cause the form with empty fields to submit without validation and modal get closed, beside this there is nothing wrong with the code,

CSS required

1. Bootstrap.css
   
2. FormValidation.min.css
3. Font-awesome.min.css

JS libraries required

1. jQuery.js
2. Bootstrap.js (Bootstrap Framework)
3. FormValidation.min.js
4. Bootstrap.min.js (This library which you missed to include comes with formValidation plugin to support Bootstrap frame-work and must be included in document for validation to work
   Note: This is not Bootstrap Framework Library)

 $(document).ready(function() { $('#loginForm').formValidation({ framework: 'bootstrap', excluded: ':disabled', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { name: { validators: { notEmpty: { message: 'The name is required' } } }, number: { validators: { notEmpty: { message: 'The phone number is required' } } } } }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script> <button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button> <!-- Modal --> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true"> <div class="modal-dialog"> <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> <h5 class="modal-title">Request an Appointment</h5> </div> <div class="modal-body"> <!-- The form is placed inside the body of modal --> <form id="loginForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Full Name</label> <div class="col-xs-5"> <input type="text" class="form-control" name="name" /> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Phone Number</label> <div class="col-xs-5"> <input type="number" class="form-control" name="number" placeholder="(888)888-8888" /> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </form> </div> </div> </div> 

Fiddle

Answer 2

Try to call it like this:

$(document).ready(function() {
  $('#submit').click(function(e){
            e.prevetDefault();
        $('#loginForm').formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        }
                    }
                },
                number: {
                    validators: {
                        notEmpty: {
                            message: 'The phone number is required'
                        }
                    }
                }
            }
          return false;
        });
    })
});

Unfortunately I don't have this plugin so I can not test it. Please don't blame me if this don't work. Normally I use 'jquery.validate.js' which is free.