jQuery验证插件AJAX提交不工作

Question

使用jQuery验证插件做验证的引导模式窗体，当我发送的形式，jQuery的验证插件是工作，但Ajax代码会做两个时间和形式不能发送的形式出。

引导形式

<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" value="<?php echo $username; ?>" readonly/> 
        <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> 
    <button class="btn btn-success" id="submitcontact">ok</button> 
</form> 

的JavaScript

$(document).ready(function() { 
    $('form').validate({ 
     rules: { 
      topic: { 
       required: true 
      }, 
      ruser: { 
       required: true 
      }, 
      content: { 
       required: true 
      } 
     }, 

     messages: { 
      topic: { 
       required: 'enter topic' 
      }, 
      ruser: { 
       required: 'enter nuser' 
      }, 
      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) { 
      $.ajax({ 
       type: "POST", 
       url: "process.php", 
       data: $('form.contact').serialize(), 
       success: function (msg) { 
        alert("ok!"); 
        if (msg == 'ok') { 
         alert(msg); 
         location.reload() 
        } 
       }, 
       error: function() { 
        alert("failure"); 
       } 
      }); 
      return false; 
     } 
    }); 

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

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

的jsfiddle

Answer 1

你可能需要删除该位：

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

请看例子： http://jsfiddle.net/8eoreedb/1/

Answer 2

使用.valid()方法：

说明：所选择的形式检查是否有效，或者是否所有选定的元素是有效的。

Updated Fiddle

$('#submitcontact').on('click', function() { 
    if ($('form.contact').valid()) { 
     // Form is valid 
     $('form.contact').submit(); 
    } 
}); 

文件：http://jqueryvalidation.org/valid/

演示：http://jsfiddle.net/8eoreedb/4/