jquery验证插件ajax提交不工作

我使用jquery验证插件在引导模式窗体中进行验证，当我发送表单时，jquery验证插件无法工作，表单也无法发送。jquery验证插件ajax提交不工作

引导模式窗体

<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'); // for 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; 
     } 
    }); 
});

我怎样才能解决这个问题？

的jsfiddle

来源

2015-04-25 Rex Mak

的问题是提交按钮是不是你尝试提交表单的后裔。

一个可能的解决方案是写的按钮单击处理程序，并调用形式从这里提交类似

 <div class="modal-footer"> 
      <button class="btn btn-success" id="submitcontact">send</button> 
      <a href="#" class="btn" data-dismiss="modal">close</a> 
     </div>

然后

$('#submitcontact').click(function(){ 
    $('form.contact').submit(); 
})

演示：Fiddle

来源

2015-04-25 04:49:34

我明白了。感谢您的解决方案。 –

首先，您的Jquery代码有一个错误：

在线没有。 40： - }替换为},
解决方法是调用onclick事件按钮的功能。无需删除type="submit"，因为它在Arun的答案中被删除。

内$(document).ready(function()写如下功能：

$('#sendForm').click(function(){ 
    $('form.contact').submit(); 
})

，它会工作。 WOKRING DEMO

来源

2015-04-25 05:02:09 Vikrant

jquery验证插件ajax提交不工作

回答

相关问题