在jquery验证中使用一个按钮验证多个表单

时间:2013-06-17 13:32:36

标签: jquery

我正在尝试使用jquery验证插件验证但不使用一个按钮提交多个表单。这是我的代码的简化版本

<script>
    $(document).ready(function() {


        var validator1 = $("#form1").validate({
            rules: {
                field1: {required: true}

            },
            messages:{
                field1:{required:"Field 1 required"},

            submitHandler: function(form) {

              //some code
                }


        });

        var validator2 = $("#form2").validate({
            rules: {
                field2: {required: true}

            },
            messages:{
                field2:{required:"Field 2 required"},

            submitHandler: function(form) {

              //some code
                }


        });

});

function submit_forms() {
    $('#form1').validate();
    $('#form2').validate();

    if ($('#form1').valid() && $('#form2').valid()) {

        alert('both forms are valid');
        //do some stuff
    }

}

</script>






<form id="form1>

<input type="text id="field1" />
</form>

<form id="form2">
<input type="text id="field2" />
</form>


<input type="button" onclick="submit_forms();" />

然而它不起作用。我希望验证两个表单并显示任何验证消息。我不希望调用任何一种形式的提交处理程序。我想决定在按钮的click事件中做什么。我的代码根本不起作用,因为如果有错误则不显示验证消息,如果代码正常则不显示警报。

我不是一个javascript程序员,所以我真的不知道我在做什么。我是否需要在按钮单击功能中调用验证方法,或者已经在文档准备中使用此代码调用它们:$(“#form1”)。validate(....

我也不认为应该调用提交处理程序,因为我没有在任何地方提交表单,只调用了validate和valid方法。这些方法是否在幕后调用submit()?

提前感谢您的帮助

1 个答案:

答案 0 :(得分:1)

如果我有一些jQuery代码,我如何检查复选框:

$( “#form1中”)。验证({

            debug: true,
            submitHandler: function(form) {

                form.submit


                //alert("Mail gotowy do wysłania!");

            },
            errorElement: "div",
            errorContainer: $("#warning, #summary"),
            errorPlacement: function(error, element) {
                error.appendTo( element.parent("td").next("td") );
            },

            success: function(label) {
             label.addClass("validr").text("Dane wprowadzone poprawnie!")
           },

            messages: {

                name: {
                    required: \'required\',
                    minlength: \'wrong\'
                },
                mail: {
                    required: \'required!\',
                    email: \'wrong\'

                },
                subject: {
                    required: \'required!\',
                    minlength: \'wrong\'

                },
                msg: {
                    required: \'required!\',
                    minlength: \'wrong\'

                }, 
            check: {
            required: \'wrong\' //Don't work
                   }
            }
});

    ';

HTML:

 <form name="form" id="form" action="mail" method="POST">

<table class="objTable">

<tbody>

<tr><td id="formularz">Formularz kontaktowy</td><tr>
<tr>
<td>Imię i nazwisko:</td>
<td><input type="text" value="" name="name" id="name" class="required" minlength="3" maxlength="20" tabindex="1" /></td>
<td></td>
</tr>

<tr>
<td>Twój e-mail:</td>
<td><input type="text" value="" name="mail" class="required email" tabindex="2" /></td>
<td></td>
</tr>

<tr>
<td>Temat:</td>
<td><input type="text" value="" name="subject" class="required" minlength="10" tabindex="3" /></td>
<td></td>
</tr>

<tr>
<td>Wiadomość:</td>
<td><textarea name="msg" class="required" minlength="20" tabindex="4"></textarea></td>
<td></td>
</tr>

<tr>    
<td><label for="sent-to-me" id="sent-to-me">Wyślij mi kopię tej wiadomości</label></td>
<td><input type="checkbox" name="check" id="kontaktcheck" tabindex="5"/></td>
<td></td>   
</tr>

</tbody>

</table>

<br /><br />

<input type="submit" name="submit-form" id="wyslij" value="" />

</form>