爲提交表單創建驗證腳本

Question

我已經使用Expression引擎的插件自由格式創建了提交表單，所有內容都以提交的方式工作，唯一的問題是我的估價方面。

有沒有辦法提交之前驗證我的腳本，即收拾東西作爲填充字段，不正確的電子郵件等。

下面

是我的代碼片段。

JQUERY

var form = $('#ajax-contact'); 
var formMessages = $('#form-messages'); 

$(form).submit(function(e) { 

e.preventDefault(); 
var formData = $(form).serialize(); 

// Submit the form using AJAX. 
$.ajax({ 
    type: 'POST', 
    url: $(form).attr('action'), 
    data: formData 
}) 
.done(function(response) { 

    if (response.success) { 
     formMessages.removeClass('error').addClass('success').text("Thank you for submitting your details"); 
      $('.valFields').val(""); 
    } else { 
     formMessages.removeClass("success").addClass("error").text("Oops, Please check your details"); 
    } 

}) 


.fail(function(data) { 
    // Make sure that the formMessages div has the 'error' class. 
    $(formMessages).removeClass('success'); 
    $(formMessages).addClass('error'); 

    // Set the message text. 
    if (data.responseText !== '') { 
     $(formMessages).text(data.responseText); 
    } else { 
     $(formMessages).text('Oops! An error occured and your message could not be sent.'); 
    } 
}); 

}) 

}); 

HTML

<div id="form-messages"> 



     {exp:freeform:form 
      form_id="1" 
      admin_notify="myemail@.me.com" 
      form:class="main-contact submit-fade ajax-form" 
      form:id="ajax-contact" 


     } 

      <ul class="small-block-grid-2 medium-block-grid-2 hide-form"> 
       <li> 
        <label for="name">Name</label> 
        {freeform:field:first_name 
         attr:class="form-control valFields" 
         attr:placeholder="First Name" 
         attr:class="required" 
        } 

       </li> 

       <li> 
        <label for="email">Email</label> 
        {freeform:field:email 
         attr:class="form-control valFields" 
         attr:placeholder="Email" 
         attr:class="required" 
        } 
       </li> 
       </ul> 
       <input type="submit" class="btn btn-success"> 

     {/exp:freeform:form} 

     </div> 


    </div> 
    </div> 

Answer 1

領域的驗證可以做調用函數

呼叫驗證功能onSubmit action，如果成功執行形式的使用AJAX提交。

Example: 

<script> 
    $(form).submit(function(e) { 

    e.preventDefault(); 
    var check = validate(); 
    if(check){ 
    var formData = $(form).serialize(); 
    .. 
    //form sumit using AJAX 
    .. 
} 

function validate() 
     { 
     if(document.myForm.Name.value == "") 
     { 
      alert("Please provide your name!"); 
      document.myForm.Name.focus() ; 
      return false; 
     } 

     if(document.myForm.EMail.value == "") 
     { 
      alert("Please provide your Email!"); 
      document.myForm.EMail.focus() ; 
      return false; 
     } 
     return true; 
    } 
</script> 

Answer 2

這樣做的更好的辦法是把類型輸入

<ul class="small-block-grid-2 medium-block-grid-2 hide-form"> 
      <li> 
       <label for="name">Name</label> 
       {freeform:field:first_name 
        attr:class="form-control valFields" 
        attr:placeholder="First Name" 
        attr:required="required" 
       } 

      </li> 

      <li> 
       <label for="email">Email</label> 
       {freeform:field:email 
        attr:class="form-control valFields" 
        attr:placeholder="Email" 
        attr:required="required", 
        attr:type="email" 
       } 
      </li> 
      </ul> 

它不僅確保該字段沒有留空，但也將檢查有效的電子郵件類型。