Javascript jQuery验证-连接多个表单的变量

我试图用不同的名称（相同数量的字段）对多个表单进行验证，但无法连接变量。请参阅以下表格：

<form method="post" id="form_validate344" class="form_validate" data-id="344" novalidate="novalidate">
    <div class="col-sm-12">
        <input type="text" class="form-control" value="" name="email-form-nombre344" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" value="" name="email-form-email344" id="email-form-email344" placeholder="EMAIL*">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" value="" name="email-form-telefono344" id="email-form-telefono344" placeholder="TELÉFONO*">
    </div>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="email-form-empresa344" id="email-form-empresa344" placeholder="EMPRESA">
    </div>
    <div class="col-sm-4">
        <input type="text" class="form-control" value="" name="email-form-edad344" id="email-form-edad344" placeholder="EDAD*">
    </div>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="email-form-puesto344" id="email-form-puesto344" placeholder="PUESTO*">
        <input type="hidden" value="344" name="post_id">
    </div>
    <div class="col-sm-4">
        <select name="email-form-sede344" class="form-control" id="email-form-sede344">
                      <option value="">SEDE*</option><option value="Monterrey">Monterrey</option></select>
    </div>
    <div class="col-sm-4 col-sm-offset-4">
        <input type="submit" class="form-control btn submit" name="enviar344" value="ENVIAR">

    </div>

</form>

---

但什么都不管用。如何实现这一点？

如果有许多表单具有不同的表单名称（相同数量的字段），那么为什么 动态命名输入名称。 所有表单的输入名称都可以相似 例如：id=“form_validate344”的表单可以有以下输入

<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">

<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre345" placeholder="NOMBRE COMPLETO*">

id为=“form_validate345”的表单可以有以下输入

<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">

<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre345" placeholder="NOMBRE COMPLETO*">

在上述两种情况下，输入名称相似，输入id唯一不同 这同样适用于所有其他输入

所以在js代码中，不需要在表单名后面加ID

您的最终代码如下所示：

HTML

塞德*蒙特雷

JS

$（'.form_validate'）。每个（函数（）{
$（此）。验证（{
//这里我删除了344（表单ID）
规则：{“电子邮件表单名称”：“必需”，}，
//这里我删除了344（表单ID）
信息：{
测试：“你喜欢的是用武之地”，
“电子邮件格式电子邮件”：“欢迎使用电子邮件válido”，
“telefono电子邮件格式”：“欢迎加入telefono válido”，
“empresa电子表格”：“请支持empresa”，
“电子表格edad”：“欢迎加入número de edad válido”，
“puesto电子表格”：“Por favor entra tu puesto”，
“sede电子表格”：“Por elige una sede”，
},
错误元素：“em”，
errorPlacement:函数（错误，元素）{
//将'help block'类添加到error元素
错误。addClass（“帮助块”）；
//将“has feedback”类添加到父div.form-group
//为了向输入添加图标
//元素。家长（“.jv”）.addClass（“有反馈”）；
if（element.prop（“type”）=“复选框”）{
错误.insertAfter（element.parent（“label”）；
}否则{
错误。插入符（元素）；
}
//添加span元素（如果不存在），并对其应用图标类。
如果（！element.next（“span”）[0]）{
$（“”）。插入后面的（元素）；
}
},
成功：功能（标签、元素）{
//添加span元素（如果不存在），并对其应用图标类。
if（！$（元素）.next（“span”）[0]）{
$（“”）之后插入（$（元素））；
}
},
突出显示：函数（元素、errorClass、validClass）{
$（element）.parents（.jv”）.addClass（“有错误”）.removeClass（“有成功”）；
$（元素）.next（“span”）.addClass（“glyphicon移除”）.removeClass（“glyphicon确定”）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（element）.parents（.jv”）.addClass（“已成功”）.removeClass（“已出错”）；
$（元素）.next（“span”）.addClass（“glyphicon ok”）.removeClass（“glyphicon移除”）；
}
});
});

您可以相应地更改您的

JS

代码：

$('form[id^="form_validate").each(function () {
     let thisID = $( this ).attr('id').replace('form_validate','');

      $( this ).validate( {

      rules:  {"email-form-nombre"+thisID : "required", },


      messages: {
       test: "Por favor entra tu usuario",
       "email-form-email"+thisID : "Por favor entra un email válido",
       "email-form-telefono"+thisID : "Por favor entra un número de telefono válido",
       "email-form-empresa"+thisID : "Por favor entra tu empresa",
       "email-form-edad"+thisID : "Por favor entra un número de edad válido",
       "email-form-puesto"+thisID : "Por favor entra tu puesto",
       "email-form-sede"+thisID : "Por elige una sede",
      },
      errorElement: "em",
      errorPlacement: function ( error, element ) {
       // Add the `help-block` class to the error element
       error.addClass( "help-block" );

       // Add `has-feedback` class to the parent div.form-group
       // in order to add icons to inputs
       //element.parents( ".jv" ).addClass( "has-feedback" );

       if ( element.prop( "type" ) === "checkbox" ) {
         error.insertAfter( element.parent( "label" ) );
       } else {
         error.insertAfter( element );
       }

       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !element.next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>" ).insertAfter( element );
       }
      },
      success: function ( label, element ) {
       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !$( element ).next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>" ).insertAfter( $( element ) );
       }
      },
      highlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-error" ).removeClass( "has-success" );
       $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
      },
      unhighlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-success" ).removeClass( "has-error" );
       $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
      }
      });
    });

$（'form[id^=“form\u validate”）。每个（函数）{
让thisID=$（this.attr（'id'）.replace（'form_validate'，''）；
$（此）。验证（{
规则：{“电子邮件表单名称”+此ID:“必需”，}，
信息：{
测试：“你喜欢的是用武之地”，
“email form email”+此ID:“Por favor entra un email válido”，
“telefono电子表格”+此ID:“欢迎加入telefono válido”，
“empresa电子表格”+此ID:“Por FURGE entra tu empresa”，
“电子表格edad”+thisID:“欢迎加入瓦里多”，
“电子邮件表单puesto”+此ID:“赞成加入puesto”，
“电子邮件表单sede”+此ID:“Por elige una sede”，
},
错误元素：“em”，
errorPlacement:函数（错误，元素）{
//将'help block'类添加到error元素
错误。addClass（“帮助块”）；
//将“has feedback”类添加到父div.form-group
//为了向输入添加图标
//元素。家长（“.jv”）.addClass（“有反馈”）；
if（element.prop（“type”）=“复选框”）{
错误.insertAfter（element.parent（“label”）；
}否则{
错误。插入符（元素）；
}
//添加span元素（如果不存在），并对其应用图标类。
如果（！element.next（“span”）[0]）{
$（“”）。插入后面的（元素）；
}
},
成功：功能（标签、元素）{
//添加span元素（如果不存在），并对其应用图标类。
if（！$（元素）.next（“span”）[0]）{
$（“”）之后插入（$（元素））；
}
},
突出显示：函数（元素、errorClass、validClass）{
$（element）.parents（.jv”）.addClass（“有错误”）.removeClass（“有成功”）；
$（元素）.next（“span”）.addClass（“glyphicon移除”）.removeClass（“glyphicon确定”）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（element）.parents（.jv”）.addClass（“已成功”）.removeClass（“已出错”）；
$（元素）.next（“span”）.addClass（“glyphicon ok”）.removeClass（“glyphicon移除”）；
}
});
});

为什么不首先使用PHP动态编写适当的

规则

对象？不。因为我需要js文件中的全部代码，每个表单都有自己的提交按钮？那么我假设您正在单独验证它们。请制作一个工作片段示例，至少包含两个表单，以重现您面临的问题.然后我们也许可以帮你。

$('.form_validate').each(function () {

$(this).validate( {
//HERE I HAVE REMOVED 344 (form ids) 
rules:  {"email-form-nombre" : "required", },

//HERE I HAVE REMOVED 344 (form ids) 
messages: {
 test: "Por favor entra tu usuario",
 "email-form-email" : "Por favor entra un email válido",
 "email-form-telefono" : "Por favor entra un número de telefono válido",
 "email-form-empresa" : "Por favor entra tu empresa",
 "email-form-edad" : "Por favor entra un número de edad válido",
 "email-form-puesto" : "Por favor entra tu puesto",
 "email-form-sede" : "Por elige una sede",
},
errorElement: "em",
errorPlacement: function ( error, element ) {
 // Add the `help-block` class to the error element
 error.addClass( "help-block" );

 // Add `has-feedback` class to the parent div.form-group
 // in order to add icons to inputs
 //element.parents( ".jv" ).addClass( "has-feedback" );

 if ( element.prop( "type" ) === "checkbox" ) {
   error.insertAfter( element.parent( "label" ) );
 } else {
   error.insertAfter( element );
 }

 // Add the span element, if doesnt exists, and apply the icon classes to it.
 if ( !element.next( "span" )[ 0 ] ) {
   $( "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>" ).insertAfter( element );
 }
},
success: function ( label, element ) {
 // Add the span element, if doesnt exists, and apply the icon classes to it.
 if ( !$( element ).next( "span" )[ 0 ] ) {
   $( "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>" ).insertAfter( $( element ) );
 }
},
highlight: function ( element, errorClass, validClass ) {
 $( element ).parents( ".jv" ).addClass( "has-error" ).removeClass( "has-success" );
 $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
},
unhighlight: function ( element, errorClass, validClass ) {
 $( element ).parents( ".jv" ).addClass( "has-success" ).removeClass( "has-error" );
 $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
}
});
});

$('form[id^="form_validate").each(function () {
     let thisID = $( this ).attr('id').replace('form_validate','');

      $( this ).validate( {

      rules:  {"email-form-nombre"+thisID : "required", },


      messages: {
       test: "Por favor entra tu usuario",
       "email-form-email"+thisID : "Por favor entra un email válido",
       "email-form-telefono"+thisID : "Por favor entra un número de telefono válido",
       "email-form-empresa"+thisID : "Por favor entra tu empresa",
       "email-form-edad"+thisID : "Por favor entra un número de edad válido",
       "email-form-puesto"+thisID : "Por favor entra tu puesto",
       "email-form-sede"+thisID : "Por elige una sede",
      },
      errorElement: "em",
      errorPlacement: function ( error, element ) {
       // Add the `help-block` class to the error element
       error.addClass( "help-block" );

       // Add `has-feedback` class to the parent div.form-group
       // in order to add icons to inputs
       //element.parents( ".jv" ).addClass( "has-feedback" );

       if ( element.prop( "type" ) === "checkbox" ) {
         error.insertAfter( element.parent( "label" ) );
       } else {
         error.insertAfter( element );
       }

       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !element.next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>" ).insertAfter( element );
       }
      },
      success: function ( label, element ) {
       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !$( element ).next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>" ).insertAfter( $( element ) );
       }
      },
      highlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-error" ).removeClass( "has-success" );
       $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
      },
      unhighlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-success" ).removeClass( "has-error" );
       $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
      }
      });
    });