提交表单前进行jQuery验证

Question

我有以下表单：

<form id="form" action="comments.php" method="post">
  <ul>
    <li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li>
    <li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li>
    <li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

使用以下JQuery进行表单提交：

target: '#preview', 
  success: function() { 
  $('#formbox').slideUp('fast'); 
}

现在的问题是我也有表单验证 JQuery 代码。

$().ready(function() {
    // validate comment form
    $("#form").validate({ 
    });
});

两者都很好用，表单会弹出警告说三个字段都不能为空，但是表单中的日期仍然会被提交到数据库中。我使用以下代码进行表单验证：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 所以问题是如何将第一个jquery添加到第二个jquery中，使得第一个jquery在必填字段填写完毕后执行？希望有人能帮忙。谢谢。

- Boris Zegarac

Answer 1

如果您想手动提交表单，就必须绕过jQuery绑定事件。您可以通过以下任一方式实现：

$('#form_id')[0].submit();

或者

$('#form_id').get(0).submit();

[0]或get(0)返回的是DOM对象而不是jQuery对象。

- Francisco Goldenstein

---

谢谢指出这个问题...我正在寻找这个，因为我有一个绑定到提交表单的事件，但在实际发送表单之前，我必须进行一个AJAX请求，如果条件成立，我才会提交表单，所以我需要绕过。+1 - Erik Čerpnjak

Answer 2

从您的示例中，我不清楚您页面的控制流程，但是我假设您在某个地方调用了submit()方法。在验证表单并提交之前，请使用valid()方法检查其验证情况。您的代码应该类似于这样：

$("#form").validate();
if ($('#form').valid())
    $('#form').submit();

- Abbas

Answer 3

您可以使用 JQuery 表单验证插件中的 submitHandler。

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(".form").validate({
        rules: {
            userName: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            userName: {
                required: "specify userName"
            },
            password: {
                required: "specify password"
            }
        },
        errorClass: "help-inline text-danger",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        },
        submitHandler: function(form,e) {
            e.preventDefault();
            console.log('Form submitted');
            $.ajax({
                type: 'POST',
                url: 'authenticate.jsp',
                dataType: "html",
                data: $('form').serialize(),
                success: function(result) {
                    window.location.href = "dashboard.jsp";
                },
                error : function(error) {

                }
            });
            return false;
        }
    });

});  
</script>

- Raju

Answer 4

我不了解你的验证插件，但通常可以使用以下代码：

<script>

    $("form").submit(function() {
      if (validationIsTrue()) {
        return true;
      }
      else {
        return false;
      }
    });
</script>

您需要进行验证，然后将true / false返回给表单的提交函数。如果插件确实返回布尔值，可以尝试以下操作：

$("form").submit(function() {
   return $(this).validate({ .... });
});

- Grrbrr404

Answer 5

当你说“提交表单内的日期”时，这对我来说毫无意义，因为在你的代码片段中我看不到任何叫做“日期”的东西。我广泛使用了.validate()插件... 我可以告诉你，可能有用的是你正在使用的validate插件有一个submitHandler函数，您可以使用它...

// validate comment form
$("#form").validate({
submitHandler : function(form) {
    //do something here
    form.submit();
}
});

只有在验证规则都被满足的情况下，才会调用submitHandler。在您的情况下，您有三个带有“required”属性的字段，这意味着除非所有三个字段都有值，否则不会提交此表单。

因此，我可以确定，在提供的信息中没有任何迹象表明您所描述的问题。提供更多和更好的信息将有助于我们找出问题所在。

- kasdega