2016-05-23 121 views
0

我使用jquery驗證窗體。所以當表格提交後我使用event.preventDefault();驗證表格後,表格會提交給相應的操作頁面。但在我的情況下它不起作用。如何提交表單,如果使用jQuery進行驗證?

代碼我did-

$('form[name=contact_form]').submit(function(event) { 
     event.preventDefault(); 
     var formData = $('form[name=contact_form]').serialize(); 
     var phone = $.trim($('form[name=contact_form]').find('input[name=PHONE]').val()).length; 
     var intRegex = /[0-9 -()+]+$/; 
     var alert = $('#contact_alert'); 
     var success = $('#contact_success'); 
     if(phone==0){ 
      phone.focus(); 
      alert.html("<p class='alert alert-danger' style='text-align:left;'>Phone number is required</p>"); 
     } 
     else if((phone < 10)){ 
      phone.focus(); 
      alert.html("<p class='alert alert-danger' style='text-align:left;'>Please enter a valid phone number</p>"); 
      return false; 
     }else{ 
      return true; 
     } 
    }); 

HTML頁面:

<?php 
echo form_open_multipart('home/inquiry', array('name' => 'contact_form')); 
?> 
       <div class="row"> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <input type="hidden" name="form_type" value="C"> 
          <input type="text" name="NAME" id="user-name" class="form-control" placeholder="Full Name"/> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <input type="text" name="PHONE" id="user-phone" class="form-control" placeholder="Phone"/> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <input type="text" name="EMAIL" id="user-email" class="form-control" placeholder="Email"/> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <input type="text" name="SUBJECT" id="user-subject" class="form-control" placeholder="Reason for inquiry"/> 
         </div> 
        </div> 
        <div class="col-md-12"> 
         <textarea class="form-control" name="MESSAGE" id="user-message" placeholder="Message"></textarea> 
        </div> 
        <div class="col-md-12 text-left"> 
         <div class="form-group"> 
          <input type="submit" name="submit" class="btn btn-warning"> 
         </div> 
        </div> 
       </div> 
       <?php echo form_close(); ?> 

回答

3

別叫event.preventDefault();如果你想驗證確定後提交表單。

驗證失敗後返回false就足夠了。

+0

如果我不叫'event.preventDefault();'那麼這個功能'$('形式[名= contact_form]')。submit(函數(事件)'不是調用表單直接提交.. –

+2

它看起來應該在'if(phone == 0)'部分也有'return false',你返回'false '當電話短於10個字符時,但不是當長度等於0時。 – ahwayakchih

0
$(this).submit(); 

當它是有效的。

0

嘗試更換return true;$(this).submit();

0

我平時做這樣的事情

$("#submit").submit(function(e){ 
    if(validateFields() == true){ //If all fields are valid 
     $("#submit").submit(); 
    } 
    else{ 
     e.preventDefault(e); 
    }  
});