CODEWITHSUNDEEP
jqueryjquery-validate
user204415
user204415

Reputation: 317

jquery validate doesn't work with multiple forms

I have multiple forms in my web, you can show/hide them depeding on your query, but the jquery validate just work on the first one (Particular). Here I have my forms: https://www.lokkura.es/contacto2.php clicking on the left panel you will change the form.

Form 1 (jquery validation works here):

      <div id="form1">
            <form id="form" class="form" action="#" method="post">
            <div class="clearfix">

            <div class="col-md-6 text-center">

                <div class="control-group">
                <input name="name" type="text" class="validate['required'] textbox1" placeholder="* Nombre : "
                onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Nombre :'" />
                </div>

                <div class="control-group">
                <input name="name" type="text" class="validate['required'] textbox1" placeholder=" Ciudad : "
                onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Ciudad :'" />
                </div>

                <div class="control-group">
                <input name="email" type="text" class="validate['required','email']  textbox1"
                placeholder="* Email : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Email :'"/>
                </div>       

                 <div class="control-group">
                <input name="phone" type="text" class="validate['required']  textbox1"
                placeholder="* Teléfono : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Teléfono :'"/>
                </div> 

            </div>

            <div class="col-md-6 text-center">
                <div class="control-group">
                <textarea name="message" class="validate['required'] messagebox1"
                placeholder="* Mensaje : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Mensaje :'"></textarea>
                </div>
            </div>

            <div class="clearfix">
                <input value="Enviar Mensaje"  name="submit" type="submit" class="submitBtn" />
            </div>
            <div id="post-message-contact" class="post_message"></div>    
            </div>
            </form>
            </div>

Form 2 (jquery validation does not work here):

      <div id="form2" style="display:none">

                  <form  id="form"  class="form" action="#" method="post">
            <div class="clearfix">

            <div class="col-md-6 text-center">

                <div class="control-group">
                <input name="name" type="text" class="validate['required'] textbox1" placeholder="* Nombre : "
                onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Nombre :'" />
                </div>

                <div class="control-group">
                <input name="name" type="text" class="validate['required'] textbox1" placeholder=" Ciudad : "
                onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Ciudad :'" />
                </div>

                <div class="control-group">
                <input name="email" type="text" class="validate['required','email']  textbox1"
                placeholder="* Email : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Email :'"/>
                </div>       

                <div class="control-group">
                <input name="name" type="text" class="validate['required'] textbox1" placeholder=" Empresa : "
                onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Empresa :'" />
                </div>

                 <div class="control-group">
                <input name="name" type="text" class="validate['required'] textbox1" placeholder=" Web de Empresa : "
                onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Web de Empresa :'" />
                </div>

                 <div class="control-group">
                <input name="phone" type="text" class="validate['required']  textbox1"
                placeholder="* Teléfono : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Teléfono :'"/>
                </div> 

            </div>

            <div class="col-md-6 text-center">
                <div class="control-group">
                <textarea name="message" class="validate['required'] messagebox1"
                placeholder="* Mensaje : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Mensaje :'"></textarea>
                </div>
            </div>

            <div class="clearfix">
                <input value="Enviar Mensaje"  name="submit" type="submit" class="submitBtn" />
            </div>
            <div id="post-message-contact" class="post_message"></div>    
            </div>
            </form>
                            </div>

Javascript Code:

jQuery(document).ready(function($){
"use strict";   
  $('#form').validate(
    {
    rules: {
    name: {
    minlength: 2,
    required: true
    },
    phone: {
    required: true,
    },
    email: {
    required: true,
    email: true
    },
    message: {
    minlength: 2,
    required: true
    }
    },
    highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function(element) {
    element
    .text('').addClass('valid')
    .closest('.control-group').removeClass('error').addClass('success');
    },
    submitHandler: function(form) {
                    // do other stuff for a valid form
                    $.post('contact_form.php', $("#form").serialize(), function(data) {
                         // action file is here 
                    $('#post-message-contact').html(data);
                    });
                }
    });
    });

Upvotes: 2

Views: 4597

Answers (2)

Andrey
Andrey

Reputation: 371

You should use unique name attribute for each input field. Because the names here is not unique, it works only for first form.

Upvotes: -1

Sparky
Sparky

Reputation: 98718

You are attaching .validate() to the element with id="form"

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

  • However, you have two form elements with this same id. You cannot use the same id more than once on a page. Repeating the id is invalid HTML. jQuery will only target the first instance.

  • Even if you used a class instead, the various jQuery Validate methods cannot be attached to selectors that target more than one element at a time. So again, even if your target correctly selected a group of elements, only the first instance would be used.

1) You need to fix the invalid HTML by using a unique id on each form.

<form id="form_1" ...

<form id="form_2" ...

2) You need to construct a selector that targets all elements in this group. You can use a "starts with" selector to grab every id that "starts with" form_. 

$('[id^="form_"]')

3) You need to enclose your .validate() within a jQuery .each() so that you can apply it to each instance and not just the first.

jQuery(document).ready(function($){

    $('[id^="form_"]').each(function() { // selects all forms with id starting with "form_"
        $(this).validate({ ....          // call 'validate()' method on each one

Alternatively, your .form class would work here too.

jQuery(document).ready(function($){

    $('.form').each(function() {  // selects all forms with class="form"
        $(this).validate({ ....   // call 'validate()' method on each one

Upvotes: 5

Related Questions