检查表单验证是否为真

Question

你好，我有一个表单需要经过表单验证后再提交。如何检查以下函数是否返回true以确认所有内容都已通过验证并已提交？

我创建了一个fiddle来测试

http://jsfiddle.net/WHGq2/

修改后的代码

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <script type="text/javascript">
            $(function(){
        $("#form").validate({
            debug: false,
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                        },
                phone: {
                    equired: true,
                    phone: true
                        }
                    },
            messages: {
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
                phone: "Please provide a valid phone number.",
            }
        })  


    $('#form').submit(function(e){
        // Stop the form actually posting
        e.preventDefault();




        // I want to be able to do the check here if the form has passed validation
        if( $(this).valid() ) {
        // Stop the form actually posting

        // Send the request
        $.post('/submit.php', {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            message: $('#message').val()
        }, function(d){
            alert("Thank you for submitting your request someone will contact your shortly.");
        });
        }
    });
});
    </script>

- Brad Hazelnut

---

http://jqueryvalidation.org/validate/#success - Mainz007

你可以尝试使用 if($('#form').valid())... - j809

检查一下我的答案，我认为现在问题应该解决了。 - Indranil Mondal

Answer 1

您可以调用jQuery验证的valid()方法。例如：

if($('#form').valid())

实际上，您可以在HTML页面加载时声明验证函数，并在提交时仅检查其是否有效。

$(document).ready(function(){

$('#form').validate(rules...messages...);

在规则和消息使用时，请使用：

  rules: {
            name: {
               required: true  
            },
            email: {
                required: true,
                email: true
                    },
            phone: {
                required: true,
                phone: true                       }
                },
        messages: {
            name: { required : "Please let us know who you are."},
           email: {required : "A valid email will help us get in touch with you.",email : "A valid email will help us get in touch with you."},
            phone: {required:"Please provide a valid phone number.",phone:"Please provide a valid phone number."}
        }

这是一种好的实践方法，特别是在电话号码方面，您拼写错误了所需的信息。

$('#form').submit(function(evt) {
    evt.preventDefault();

    .....

    if( $('#form').valid() ) {
       //submit the form via ajax
    } else {
       //show errors
    }
 });

});

我认为你知道每个输入字段都需要添加name属性：

 <input type="text" name="email" />

- Indranil Mondal

---

这似乎可以防止验证显示错误数据。 preventDefault() 会短路正常的突出显示缺陷的响应。 - EFH

这可能是解决方案：$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } }); 我会研究如何在我的页面上使其工作。我会回报的。 - EFH

Answer 2

请注意，在phone规则中，required写成了equired，这可能导致了您大部分的问题。请参考附带的演示。

$(function() {

    $('#form').validate(.......);

    $('#form').submit(function(e) {
        e.preventDefault();

        .....

        if( $(this).valid() ) {
           //submit the form via ajax or otherwise
        } else {
           //report errors
        }
    });

});

JSFIDDLE DEMO

- PeterKA

---

我修改了代码并使用了您的建议，但现在它没有显示任何错误，并且无法通过ajax提交表单。 - Brad Hazelnut

我认为在准备好主体时定义验证函数将解决问题。 - Indranil Mondal

你能否创建一个JSFiddle的更新代码，以便我们一起进行工作？ - PeterKA

我为此添加了一个 jsfiddle。 - Brad Hazelnut

Answer 3

你可以使用插件的valid方法，类似以下示例。

$('#form').validate({...});

if ($('#form').valid()) {
    // do your thing
}

这里是文档 http://jqueryvalidation.org/valid

- Ehtesham

---

你的意思是 $('#form').valid() 吗？ - chris vdp

Answer 4

更新了你的代码，加入了submitHandler，用于在表单有效时处理实际提交的回调。

    <script type="text/javascript">
            $(function(){
    $('#form').submit(function(e){

        $("#form").validate({
            debug: false,
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                        },
                phone: {
                    equired: true,
                    phone: true
                        }
                    },
            messages: {
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
                phone: "Please provide a valid phone number.",
            },
            submitHandler: function() {  
                      // Stop the form actually posting
                       e.preventDefault();

                     // Send the request
                   $.post('/submit.php', {
                   name: $('#name').val(),
                   email: $('#email').val(),
                   phone: $('#phone').val(),
                   message: $('#message').val()
                   }, function(d){
                        alert("Thank you for submitting your request someone will contact your shortly.");
                   }); 
            }
    });
});
});
    </script>

- Ramesh Dahiya

---

非常感谢。它说有一个括号丢失了，但是我不知道哪里漏掉了。 - Brad Hazelnut

非常感谢，我更新了我的代码，但现在它只是提交表单而没有进行任何验证，并且ajax提交也不起作用。 - Brad Hazelnut