javascript - FormValidation on modal bootstrap -
i have modal so
<div id="mymodal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h2 class="page-title"> add movie <small>note fields marked <span style="color:red">*</span> required</small> </h2> </div> <div class="modal-body"> <form class="form-horizontal" role="form" id="newmovie"> <div class="form-group"> <label class="control-label col-sm-4" for="prefix"> title <span style="color:red">*</span> </label> <div class="col-sm-6"> <input type="text" class="form-control" id="title" name="title" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="prefix"> classification <span style="color:red">*</span> </label> <div class="col-sm-6"> <input type="text" class="form-control" id="classification" name="classification" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="prefix"> rating <span style="color:red">*</span> </label> <div class="col-sm-6"> <input id="rating" name="rating" data-slider-id='ex1slider' type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0" /> <span id="rate" style="margin-left:5%">0 / 5</span> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="prefix"> release date <span style="color:red">*</span> </label> <div class="col-sm-6"> <input type="text" class="form-control" id="releasedate" name="releasedate" /> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="prefix"> cast <span style="color:red">*</span> </label> <div class="col-sm-5"> <input type="text" class="form-control col-sm-5" id="cast" /> </div> <div class="col-sm-1"> <button type="button" id="btnnewcast" class="btn btn-default">+</button> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" for="prefix"></label> <div class="col-sm-6" id="newcast"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="btnaddmovie" data-dismiss="modal">save</button> </div> </div> </div> when btnaddmovie clicked ajax / jquery method called calls method in controller. before submit validate fields have entered.
i following form validation on bootstrap modal
i have declared implementation follows:
$(document).ready(function() { $('#newmovie').formvalidation({ framework: 'bootstrap', excluded: [':disabled'], icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { title: { validators: { notempty: { message: 'the title required' } } } } }); }); my ajax method follows:
$("#btnaddmovie").click(function () { var stringarr = $('span[data-id="cast[]"]').map(function () { return $(this).text().trim(); }).get(); $.ajax({ url: '/movies/add', traditional: true, data: { "title": $("#title").val(), "classification": $("#classification").val(), "rating": $("#rating").val(), "releasedate": $("#releasedate").val(), "cast": stringarr }, cache: false, type: "post", success: function (result) { if (result.success) { } }, error: function (result) { alert("error"); } }); }); but reason when ever click button on form automatically posts without doing validation?
i'm trying validate , depending on if true or false perform relevant action.
about button, either have change submit button or use button setting indicate button should trigger validation (see bellow)
button: { // submit buttons selector selector: '#btnaddmovie' } you have delete
data-dismiss="modal"button
and trigger success.form.fv event , call ajax method there, see following code:
$('#newmovie').formvalidation({ framework: 'bootstrap', excluded: [':disabled'], // ... icon: { // ... }, fields: { // ... } }) .on('success.form.fv', function(e) { // prevent form submission e.preventdefault(); // , // place ajax call here var stringarr = $('span[data-id="cast[]"]').map(function () { return $(this).text().trim(); }).get(); $.ajax({ url: '/movies/add', traditional: true, data: { "title": $("#title").val(), "classification": $("#classification").val(), "rating": $("#rating").val(), "releasedate": $("#releasedate").val(), "cast": stringarr }, cache: false, type: "post", success: function (result) { if (result.success) { } }, error: function (result) { alert("error"); } }); // , close modal $('#mymodal').modal('hide'); }); # references:
formevents docs: http://formvalidation.io/settings/#event-formbuttonsetting docs: http://formvalidation.io/settings/#form-button
Comments
Post a Comment