jQuery验证不适用于多种形式 [英] jquery validate doesn't work with multiple forms

问题描述

我的网站中有多种表单，您可以在查询中显示/隐藏它们，但jquery验证仅适用于第一个表单(特定表单). 这是我的表格: https://www.lokkura.es/contacto2.php 单击您将在左侧面板中更改表格.

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.

表1(jquery验证在这里起作用)

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>  

表格2(jquery验证在这里不起作用):

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代码:

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);
                    });
                }
    });
    });

推荐答案

您正在使用id="form"

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

• 但是，您有两个具有相同id的form元素.您不能在同一页面上多次使用同一id.重复id是无效的HTML. jQuery将仅定位 first 实例.

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

    即使您改用class，也无法将各种jQuery Validate方法附加到一次定位多个元素的选择器.同样，即使您的目标正确选择了一组元素，也只会使用第一个实例.

    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)您需要通过在每个表单上使用唯一 id来修复无效的HTML.

    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)您需要构造一个针对该组中所有元素的选择器.您可以使用以...开头"选择器来抓取所有以"form_开头"的id.

    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)您需要将.validate()括在jQuery .each()中，以便可以将其应用于每个实例，而不仅仅是第一个实例.

    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
    

    ---

    或者，您的.form class也可以在这里使用.

    ---

    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
    

    这篇关于jQuery验证不适用于多种形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！