javascript - Modal Form Validation in Bootstrap -
i'm using twitter bootstrap , trying put validations on modal form.
where did go wrong?
i tried <form role="form"> 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">×</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@you.com" 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 required' } } }, textaddress: { validators: { notempty: { message: 'your address required' } } }, inputremail: { validators: { notempty: { message: 'your email required' } } }, inputrcontact: { validators: { notempty: { message: 'your contact number required' } } } } }); }); any appreciated. i'm open suggestions too.
added $(document).ready(function() clarity.
possible , common reason validation not working when using formvalidation plugin framework: 'bootstrap' forget include bootstrap.js or bootstrap.min.js comes formvalidation plugin file required formvalidation plugin work bootstrap framework.
don't confuse bootstrap(.min).js file provided bootstrap framework bootstrap(.min).js provided formvalidation placed inside formvalidation/dist/js/framework directory.
they 2 different files , both of them need included.
reference can found here , libraries include when using formvalidation plugin 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 required' } } }, textaddress: { validators: { notempty: { message: 'your address required' } } }, inputremail: { validators: { notempty: { message: 'your email required' }, emailaddress: { message: 'the input not valid email address' } } }, inputrcontact: { validators: { notempty: { message: 'your contact number required' }, regexp: { message: 'the phone number can contain digits, spaces, -, (, ), + , .', 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">×</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@you.com" 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>
Comments
Post a Comment