0

我正在尝试使用 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();" />

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

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

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

在此先感谢您的帮助

4

1 回答 1

1

如果我有一些 jQuery 代码，我如何检查复选框：

$("#form1").validate({

            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>
于 2013-06-19T09:53:55.887 回答