validating multiple forms with one button in jquery validation

Question

I am trying to validate but not submit multiple forms with one button using the jquery validation plugin. Here is a simplified version of my code

<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();" />

However it isn;t working. I want both forms to be validated and any validation messages to be displayed. I do not want the submit handlers of either form to be called. I want to decide what to do in the click event of the button. My code isn't working at all as the validation messages are not being displayed if there are errors and the alert isnt being displayed if the code is fine.

I'm not a javascript programmer so I don't really know what I am doing. Do i need to call the validate methods in the button click function or have they already been called by this code in document ready: $("#form1").validate(....

I also didnt think the submit handler should be called because I am not submitting the form anywhere, only calling the validate and valid methods. Do these methods call submit() behind the scenes?

Thanks in advance for your help

for preventing the forms from submitting, you could simply call return false in the submitHandler function. For your validation messages which are not displayed, debug step by step and let us know wherw you are actually stuck at, or create a jsfiddle — Mandeep Jain
– Mandeep Jain, Commented Jun 17, 2013 at 13:37
hi. I am stuck :) The code above does not work. If both fields are blank I only get the error message for field1. If field1 is filled in I get the error message for field 2. It wont display the error messages for the 2 forms simultaenously. There may be some missing quotes in the above code but that was from copying and pasting. — user2274191
– user2274191, Commented Jun 17, 2013 at 19:50
I think thats the typical behavior. Check with your plugin that whether it shows all error messages at once. I have seen some forms where they show error fields one at a time so as to not freak out the user with too many errors. The scenario which you want may be for more adavanced users, but if your audience is novice/new to computers, then the current approach is the better one. — Mandeep Jain
– Mandeep Jain, Commented Jun 18, 2013 at 6:20

Martin · Accepted Answer · 2013-06-19 09:53:55Z

How I can check checkbox if i have some jQuery Code:

$("#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>

Collectives™ on Stack Overflow

validating multiple forms with one button in jquery validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related