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">                             &times;                         </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

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

Bubble Sort Manually a Linked List in Java -

Image
this first question here. trying manually sort linked list of integers in java , can not figure out wrong code. suggestions? don't error, still have output unordered. tried few different ways, nothing worked. appreciate if can me that. public class node { int data; node nextnode; public node(int data) { this.data = data; this.nextnode = null; } public int getdata() { return this.data; } } // node class public class datalinkedlist implements datainterface { private node head; private int size; public datalinkedlist(){ this.head = null; this.size = 0; } public void add(int data) { node node = new node(data); if (head == null) { head = node; } else { node currentnode = head; while(currentnode.nextnode != null) { currentnode = currentnode.nextnode; } currentnode.nextnode = node; ...
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more