javascript 检查表单验证是否为真

check if form validation is true

提问by Brad Hazelnut

Hello i have a form that i want to run through form validation and then submit. How can i check if the following function returns true to know that everything has been validated and then submitted?

您好，我有一个表单，我想通过表单验证然后提交。我如何检查以下函数是否返回 true 以知道所有内容都已验证然后提交？

I created a fiddle to test

我创建了一个小提琴来测试

http://jsfiddle.net/WHGq2/

http://jsfiddle.net/WHGq2/

MODIFIED CODE

修改代码

     <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>

回答by Indranil Mondal

You can call the valid() method of jquery validation. Like

可以调用jquery验证的valid()方法。喜欢

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

Actually you can declare the validate function when the html page is loaded and just check whether it's valid or not at the time of submit

其实你可以在html页面加载的时候声明validate函数，只在提交的时候检查它是否有效

$(document).ready(function(){

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

In case of rules & messages use:-

在规则和消息的情况下使用：-

  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."}
        }

It's a good practice and in case of phone numbers, you've misspelled required

这是一个很好的做法，如果是电话号码，您拼错了 required

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

    .....

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

});

And I think you know than you've to add the name attribute of each input field:-

而且我认为您知道您必须添加每个输入字段的名称属性：-

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

回答by PeterKA

Please note that requiredin the phonerule was written equiredand could have caused most of your issues. See the demo included.

请注意，required该phone规则已写入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

JSFIDDLE 演示

回答by Ramesh Dahiya

Updated your code, added submitHandler,Callback for handling the actual submit when the form is valid.

更新了您的代码，添加了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>

回答by Ehtesham

You can use validmethod of the plugin, something like following.

您可以使用valid插件的方法，如下所示。

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

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

here is the documentation http://jqueryvalidation.org/valid

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