Ajax表單驗證和提交

在這裏完全不知所措，在網上衝刷了兩天，試圖找到一個簡單的解釋，說明如何用JQuery驗證來驗證表單無濟於事......如果有人能指出我在哪裏，我錯了，這對確保我不會遭受心臟病發作非常有幫助。這裏是我的表（請只在確認發表評論，我不想聽好的編碼做法）：Ajax表單驗證和提交

<form id='test-form' class='contact-form'> 
    <ul> 
     <li><label for="full_name">Name*</label></li> 
     <li><label for="email">E-mail*</label></li> 
     <li><input id='full_name' type='text' name='full_name' onfocus="this.placeholder = ''" placeholder='Name' required></li> 
     <li><input id='email' type='text' name='email' onfocus="this.placeholder = ''" placeholder='E-mail' required></li> 
     <li>Message</li> 
     <li><textarea style='color: white; width: 100%; height:180px; background: #333333; border: none; border-radius: 3px; outline:none; font-family: montserrat;' form='contact-page-form' onfocus="this.placeholder = ''" placeholder='Please enter your message here'></textarea></li> 
     <li>Mobile Number (Optional)** <i style='font-size: 0.6em;'>for SMS updates</i></li> 
     <li><input type='text' name='phone' onfocus="this.placeholder = ''" placeholder='Phone Number' ></li> 
     <li> 
     <div class='big-button form-submit'> 
      <a onclick='document.getElementById("test-form").submit();'> 
       <div> 
        <i class="fa fa-envelope-o big message"></i> 
        SUBMIT MESSAGE 
       </div> 
      </a> 
     </div> 
     </li> 
    </ul> 
    <div class='name'> 
     <input type='text' name='name' placeholder='First Name'> // Honey pot 
    </div> 
</form>

而且我的腳本：

$(document).ready(function(){ 
    $('.name').hide(); 

    $('#test-form').validate(); 
});

所有其它的Jquery位需要一直進口....

我主要抱怨的是，表單提交沒有任何形式的驗證。我想用PHP但不幸的是這個網站必須與AJAX完全建立，因此沒有刷新允許...乾杯提前，K

來源

2014-10-16 UUake Up

你加jquery.validate.js？ – 2014-10-16 11:56:11

在未來，你可以節省大量時間，但是可以查看JavaScript錯誤控制檯。

你有兩個問題打破了驗證插件......

1）內嵌的JavaScript在您的錨標記爲提交鏈接繞過click事件觸發驗證。

<a onclick='document.getElementById("test-form").submit();'> 
    .... 
</a>

這個插件需要一個type="submit"button或input。因此，您可以簡單地用<button>標籤替換您的錨標籤，從而消除對內嵌JavaScript submit()的需求。 A <button>元素也允許您使用CSS進行樣式設計，使其看起來與文本鏈接完全相同。

<button type="submit"> 
    .... 
</button>

2）您<textarea>內的form屬性設置如下......

form='contact-page-form'

它應該包含form的id，而是因爲你的id爲test-form，這也打破驗證插件。（然而，在這種情況下，由於您的textarea已經是你的<form>的內部，form屬性是完全不必要的&多餘此元素上並能/應該被刪除。）

注意：

內聯在使用jQuery時，佔位符的JavaScript是醜陋和不必要的。您可以改爲使用單個jQuery處理函數。

$('input, textarea').on('focus', function() { 
    $(this).attr('placeholder', ''); 
});

工作演示：http://jsfiddle.net/b9co72xj/1/

如果你堅持要用，你應該使用一個type="submit"button或input，有解決方法的錨標記...

<a id="button"> 
    .... 
</a>

與jQuery click處理程序...

$('#button').on('click', function(e) { 
    e.preventDefault(); 
    $('#test-form').submit(); 
});

演示＃2：http://jsfiddle.net/b9co72xj/

最後，提交表單不需要刷新頁面，你會把你的$.ajax()內.validate()方法the submitHandler callback function。

$('#test-form').validate({ 
    submitHandler: function(form) { 
     var data = $(form).serialize(); 
     // your ajax goes here 
     $.ajax({ 
      .... 
     }); 
     return false; 
    } 
});

演示＃3：http://jsfiddle.net/b9co72xj/2/

來源

2014-10-16 16:11:35 Sparky

使用遠程方法

 remote: { 
        param: { 
         url:siteUrlStatic+"checkNameDuplicate/", 
         dataType: "json", 

         data: { 
          full_name: function() { 
           return $("#full_name").val(); 
          } 

         }, 

         async:false 
        } 
       },

來源

2014-10-16 11:54:06

Ajax表單驗證和提交

回答

相關問題