Modal Form Validation in Bootstrap

Question

I'm using twitter bootstrap and trying to put validations on my modal form.

Where did I go wrong?

I tried <form role="form"> but it ain't work.

<a href="#" class="btn btn-lg btn-custom1 btn-block" data-toggle="modal" data-target="#reserveModal">Reserve Product</a>
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
      </div>
      <div class="modal-body">
        <!-- FORM -->
          <form id="frm_reserve" name="frm_reserve" class="horizontal">
          <fieldset>
            <div class="form-group">
              <label for="inputRName" class="col-xs-6 control-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
            </div>
            </div>

            <div class="form-group">
              <label for="textArea" class="col-xs-6 control-label">Address</label>
            <div class="col-lg-10">
              <textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
            </div>
            </div>

            <div class="form-group">
              <label for="inputlName" class="col-xs-6 control-label">Email</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="[email protected]" required >
            </div>
            </div>

            <div class="form-group">
              <label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required >
            </div>
            </div>
          </fieldset>
          </form>

My script:

$(document).ready(function() {
$('#reserveModal').formValidation({
    framework: 'bootstrap',
    excluded: ':disabled',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        inputRName: {
            validators: {
                notEmpty: {
                    message: 'Your name is required'
                }
            }
        },
        textAddress: {
            validators: {
                notEmpty: {
                    message: 'Your address is required'
                }
            }
        },
        inputREmail: {
            validators: {
                notEmpty: {
                    message: 'Your email is required'
                }
            }
        },
        inputRContact: {
            validators: {
                notEmpty: {
                    message: 'Your contact number is required'
                }
            }
        }
    }
   });
});

Any help would be much appreciated. I'm open for suggestions too.

ADDED $(document).ready(function() for clarity.

Answer 1

Possible and common reason the validation not working when using formValidation plugin with framework: 'bootstrap' is mostly forget to include bootstrap.js OR bootstrap.min.js which comes with formValidation plugin Where this file is required for formValidation plugin to work with bootstrap framework.

Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.

They are two different files and both of them need to be included.

Reference Can be Found Here and Which Libraries to include when using formValidation plugin with bootstrap framework

$(document).ready(function() {
  $('#reserveModal').formValidation({
    framework: 'bootstrap',
    excluded: ':disabled',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      inputRName: {
        validators: {
          notEmpty: {
            message: 'Your name is required'
          }
        }
      },
      textAddress: {
        validators: {
          notEmpty: {
            message: 'Your address is required'
          }
        }
      },
      inputREmail: {
        validators: {
          notEmpty: {
            message: 'Your email is required'
          },
          emailAddress: {
            message: 'The input is not a valid email address'
          }
        }
      },
      inputRContact: {
        validators: {
          notEmpty: {
            message: 'Your contact number is required'
          },
          regexp: {
            message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
            regexp: /^[0-9\s\-()+\.]+$/
          }
        }
      }
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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>
<a href="#" class="btn btn-lg btn-custom1 btn-block" data-toggle="modal" data-target="#reserveModal">Reserve Product</a>
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
      </div>
      <div class="modal-body">
        <!-- FORM -->
        <form id="frm_reserve" name="frm_reserve" class="horizontal">
          <fieldset>
            <div class="form-group">
              <label for="inputRName" class="col-xs-6 control-label">Name</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
              </div>
            </div>

            <div class="form-group">
              <label for="textArea" class="col-xs-6 control-label">Address</label>
              <div class="col-lg-10">
                <textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
              </div>
            </div>

            <div class="form-group">
              <label for="inputlName" class="col-xs-6 control-label">Email</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="[email protected]" required>
              </div>
            </div>

            <div class="form-group">
              <label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required>
              </div>
            </div>
          </fieldset>
        </form>

Fiddle Working Example