在通过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验证验证表单

回答

相关问题