我尝试对具有不同名称(相同数量的字段)的倍数形式进行验证,但我无法连接变量。请参阅以下表格:
<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>
如您所见,每个输入都有一个以数字结尾的名称(在本例中为 344),这是在 php 代码中生成的,以区分其他形式,这也是我要验证的 javascrip:
$('form.form_validate').each(function () {
$( this ).validate( {
rules: {"email-form-nombre344" : "required", },
messages: {
test: "Por favor entra tu usuario",
"email-form-email344" : "Por favor entra un email válido",
"email-form-telefono344" : "Por favor entra un número de telefono válido",
"email-form-empresa344" : "Por favor entra tu empresa",
"email-form-edad344" : "Por favor entra un número de edad válido",
"email-form-puesto344" : "Por favor entra tu puesto",
"email-form-sede344" : "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" );
}
});
});
它有效,但只会验证以 344 结尾的表单,我想验证每个表单。我也用它来连接变量:
var nombre = "344";
var myObj = {};
myObj["email-form-nombre" + nombre] = {
'required': "true"
};
.
.
.
rules: {
myObj
},
但没有任何作用。如何实现?
最佳答案
如果您有许多具有不同表单名称(相同数量的字段)的表单,那么为什么 动态命名输入名称。 您可以为所有表单输入相似的名称 例如:id = "form_validate344"的表单可以有以下输入
<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">
id = "form_validate345"的表单可以有以下输入
<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre345" placeholder="NOMBRE COMPLETO*">
在上述两种情况下,输入名称相似,输入 ID 唯一不同 这同样适用于所有其他输入
所以在 js 代码中不需要提到表单名称后跟 id
你的最终代码将是这样的:
HTML
<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-nombre" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" value="" name="email-form-email" id="email-form-email344" placeholder="EMAIL*">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" value="" name="email-form-telefono" id="email-form-telefono344" placeholder="TELÉFONO*">
</div>
<div class="col-sm-8">
<input type="text" class="form-control" value="" name="email-form-empresa" id="email-form-empresa344" placeholder="EMPRESA">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" value="" name="email-form-edad" id="email-form-edad344" placeholder="EDAD*">
</div>
<div class="col-sm-8">
<input type="text" class="form-control" value="" name="email-form-puesto" id="email-form-puesto344" placeholder="PUESTO*">
<input type="hidden" value="344" name="post_id">
</div>
<div class="col-sm-4">
<select name="email-form-sede" 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>
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" );
}
});
});
关于javascript - jQuery 验证 - 连接多个表单的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43334800/