javascript - jquery validation plugin ajax submit not working -
i use jquery validation plugin validation in bootstrap modal form, when send form ,the jquery validation plugin not working form cannot send out.
bootstrap modal form
<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" 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> <h3>send message</h3> </div> <div class="modal-body"> <form class="contact"> <fieldset> <div class="modal-body"> <ul class="nav nav-list"> <div class="form-group"> <label for="topic" class="control-label ">topic:</label> <input class="form-control" type="text" name="topic"> <span class="help-block"></span> </div> <div class="form-group"> <label for="ruser" class="control-label ">ruser: </label> <input class="form-control" type="text" name="ruser"> <span class="help-block"></span> </div> <div class="form-group"> <label for="content" class="control-label ">content:</label> <textarea class="form-control" name="content" rows="3"></textarea> <span class="help-block"></span> </div> </ul> </div> </fieldset> </form> </div> <div class="modal-footer"> <button class="btn btn-success" type="submit">send</button> <a href="#" class="btn" data-dismiss="modal">close</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#form-content"> send message </button> javascript
$(document).ready(function(){ $('form').validate({ rules: { topic: { required: true }, ruser: { required: true }, content: { required: true } }, messages : { topic: { required: 'enter topic' }, ruser: { required: 'enter ruser' }, content: { required: 'enter content' } }, highlight: function(element) { $(element).closest('.form-group').addclass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeclass('has-error'); }, errorelement: 'span', errorclass: 'help-block', errorplacement: function(error, element) { if(element.parent('.input-group').length) { error.insertafter(element.parent()); } else { error.insertafter(element); } } submithandler: function (form) { alert('valid form submission'); // demo $.ajax({ type: "post", url: "process.php", data: $('form.contact').serialize(), success: function(msg){ if(msg=='no'){ alert(msg); } else if(msg=='ok!'){ alert(msg); location.reload() } }, error: function(){ alert("failure"); } }); return false; } }); }); how can fix problem?
the jsfiddle
the problem submit button not descendant of form trying submit.
one possible solution write click handler button, , call form submit there like
<div class="modal-footer"> <button class="btn btn-success" id="submitcontact">send</button> <a href="#" class="btn" data-dismiss="modal">close</a> </div> then
$('#submitcontact').click(function(){ $('form.contact').submit(); }) demo: fiddle
Comments
Post a Comment