在通過ajax提交之前使用jQuery驗證驗證表單

我正在嘗試使用Ajax將表單提交到某個頁面，然後獲取消息。我正在嘗試使用jqueryvalidation插件來驗證表單。我正在使用以下代碼通過Ajax提交表單。在通過ajax提交之前使用jQuery驗證驗證表單

<script type ="text/javascript"> 

jQuery(document).ready(function() { 

    jQuery("#footercontact").submit(function(event) { 
    form = $('#footercontact').serialize(); 
    $('#footercontact').validate(); 
    $.ajax({ 
     type: 'post', 
     url: '<?php echo base_url();?>index.php/welcome/test', 
     data: form, 
     dataType: 'html', 
     success: function(data) { 
     $("#contactname").val('Name'); 
     $("#contactemail").val('Email'); 
     $("#contactmessage").val('Message'); 
     $("#contactsuccess").html(data); 
     } 
    }); 
    event.preventDefault(); 
    }); 
}); 

</script>

當前此代碼直接發佈的代碼沒有任何驗證。如果有任何其他事情，你需要知道請問我。如果您在通過Ajax提交表單之前通過其他方法驗證表單，請參閱幫助。這裏是形式

的HTML代碼

<form name="footercontact" id="footercontact" method="POST" action=""> 

    <input type="text" id="contactname" name="name" onblur="if(this.value=='')this.value='Name';" onfocus="if(this.value=='Name')this.value='';" value="Name" class="required"> 

    <input type="text" id="contactemail" name="email" onblur="if(this.value=='')this.value='Email';" onfocus="if(this.value=='Email')this.value='';" value="Email" class="required email"> 

    <textarea name="message" id="contactmessage" cols="" rows="" onblur="if(this.value=='')this.value='Message';" onfocus="if (this.value=='Message')this.value='';" value="Message" class="required"></textarea> 

    <input name="submit" type="button" onclick="jsvalidate()" value="Submit" id="submitsave"> 

</form>

來源

2016-06-07 prabhjot

你在哪裏定義了驗證規則？ – Areca

實際上，我正在使用驗證表單的jquery驗證插件。你可以在這裏閱讀它：https://jqueryvalidation.org/validate/這隻在我不使用Ajax時才起作用。但使用它與上面的代碼只是發佈數據。 – prabhjot

你讀過它的文檔了嗎？你有沒有定義你的驗證規則？（在標記或驗證方法中？） – Areca

使用$('#footercontact').valid()這return boolean。

jQuery(document).ready(function() { 
    jQuery("#footercontact").submit(function(event) { 
    form = $(this).serialize(); 
    $(this).validate(); 
    if (!$(this).valid()) return false; 
    $.ajax({ 
     type: 'post', 
     url: '<?php echo base_url();?>index.php/welcome/test', 
     data: form, 
     dataType: 'html', 
     success: function(data) { 
     $("#contactname").val('Name'); 
     $("#contactemail").val('Email'); 
     $("#contactmessage").val('Message'); 
     $("#contactsuccess").html(data); 
     } 
    }); 
    event.preventDefault(); 

    }); 
});

來源

2016-06-07 12:46:19

在通過ajax提交之前使用jQuery驗證驗證表單

回答

相關問題