【问题标题】:Running jquery form validation and jquery form post script together一起运行 jquery 表单验证和 jquery 表单发布脚本
【发布时间】:2010-12-02 00:14:43
【问题描述】:

我有 2 个不同的脚本,一个是 jquery post for form,第二个是 jquery form validation

我在提交按钮单击操作时运行发布脚本,因此它在验证之前生效:/并且我无法将验证更改为在发布脚本之前运行:(所以现在它在没有验证的情况下提交。

怎样才能做到?感谢帮助!


JQuery POST 代码

$(function() {

  $("#btnsend").click(function() {

        var dataString = 'fullname='+ escape(document.contact.full_name.value);
        $.ajax({
          type: "POST",
          url: "query.php?act=sendMail",
          data: dataString,
          success: function() {

            $('#contact-form').hide()
                      .html("<p>thanks!</p>")
                              .fadeIn(500, function() {$('#contact-form').append("");});
           } 

        });

        return false;
    });

});

JQuery 验证

感谢插件http://bassistance.de/jquery-plugins/jquery-plugin-validation/

<!-- Form Validation -->
<script src="inc/validation/jquery.validate.js" type="text/javascript"></script>
<script src="inc/validation/js/cmxforms.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="inc/validation/css/validation.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
    $("#commentForm").validate();
});
</script>  

表格

<form id="commentForm" name="contact" method="post" action="">
    <ul id="contact-form">
        <li><label for="full_name">Full Name: *</label><input type="text" name="full_name" id="full_name" class="txt_input required" /></li>
        <li class="alignRight"><input type="submit" value="Send" id="btnsend" name="btnsend" class="btn_submit" /></li>
    </ul>
</form>

【问题讨论】:

  • +1 表示问题中给出的公式和信息,以及提供的代码。

标签: jquery validation forms submit


【解决方案1】:
$("#commentForm").validate( {
   submitHandler: function(form) {
      // validation success, do something
   }
});

在成功函数回调中调用您的 ajax 提交。

查看:http://docs.jquery.com/Plugins/Validation/validate 了解更多信息(我假设我们谈论的是同一个插件)。

【讨论】:

  • 我厌倦了把 $("#btnsend").click(function() { ...... all codehere ....... } 放到你注意到的地方/ /验证成功。它首先运行验证,这很好,但它没有运行 jquery-post aftet :/我想我应该使用 .click() 以外的其他东西......
  • 很遗憾似乎没有一个简单的解决方案,我建议你在ajax之前添加一个if检查,以在发送请求之前确认该字段是否已填写。如果您只有一个输入字段,这应该没问题,但如果您有更多并且想要使用验证插件,那么您需要一个不同的解决方案。很抱歉,我无法为您提供帮助。
猜你喜欢
  • 2011-07-29
  • 1970-01-01
  • 1970-01-01
  • 2013-02-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-12
相关资源
最近更新 更多