当输入充满jQuery Validate插件时，从复选框中删除"required" [英] Remove 'required' from checkbox when an input is filled with jQuery Validate plugin
问题描述
因此，即时通讯正在使用包含多个文本输入和复选框的联系表单，并使用jQuery Validate插件进行验证，而我想实现的目标是:
So im doing a contact form with several text inputs and checkboxes and validating with the jQuery Validate plugin, and what i want to achieve is this:
当文本输入被填充时，复选框中附加的插件规则中的"required"属性将被删除.
When the text input is filled, the 'required' attribute from the rules of the plugin aplied on the checkboxes get removed.
这是我的HTML(在引导程序模式内:
This is my HTML(inside a bootstrap modal:
<div id="invitoUno" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="height: 0; border-bottom: none;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row form-invito">
<div class="col-12">
<form method="post" action="solicitudinvito.php" id="invitoform" name="invitoform">
<h6>Nombre completo:</h6>
<div class='cb-input'>
<input id='nombre' type="text" name="nombre" placeholder="" required />
</div>
<div class='cb-input'>
<input type="text" value="Fam. de Luis Arturo Garza Bassoco" id="persona" name="persona" hidden>
</div>
<div class="row">
<div class="col-sm-6 col-12">
<h6>Celular:</h6>
<div class='cb-input'>
<input id='celular' type="text" name="celular" placeholder="" required />
</div>
</div>
<div class="col-sm-6 col-12">
<h6>Teléfono de casa (opcional):</h6>
<div class='cb-input'>
<input id='telcasa' type="text" name="telcasa" placeholder="" />
</div>
</div>
</div>
<h6>¿Requieres de recibo deducible de impuestos?:
<label style="padding-left: 20px;">Sí</label>
<input type="checkbox" class="factura option-input checkbox" name="factura" value="Requiere factura" required />
<!-- -->
<label style="padding-left: 20px;">No</label>
<input type="checkbox" class="factura option-input checkbox" name="factura" value="No requiere factura" placeholder="" required />
<!-- -->
</h6>
<br>
<h4 style="padding-bottom:5px;">deseo invitarle la despensa a:</h4>
<div class="row">
<div class="col-sm-2 col-12">
<span style="color:#5C5B5F; font-family:'PT Sans', sans-serif;">1 familia</span><br>
<span class="cantidad">$160.00</span>
<input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya una familia = $160.00" placeholder="" required />
</div>
<div class="col-sm-2 col-12">
<span style="color:#5C5B5F; font-family:'PT Sans', sans-serif;">2 familias</span><br>
<span class="cantidad">$320.00</span>
<input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya dos familias = $320.00" placeholder="" required />
</div>
<div class="col-sm-2 col-12">
<h6 style="color:#FFBA00;">Otra cantidad:</h6>
</div>
<div class="col-sm-6 col-12">
<div class='cb-input' style="margin-top: -10px;">
<input id='otrafamilia' type="text" name="familia" placeholder="$" />
</div>
</div>
</div>
<br>
<h4 style="padding-bottom:5px;">Aportación empresa mensual:</h4>
<div class="row">
<div class="col-sm-4 col-12">
<span class="cantidad">$1,000.00</span>
<input type="checkbox" class="aportacion option-input checkbox" style="top:10%;" name="empresa" value="Aportacion mensual de $1000.00" placeholder="" />
</div>
<div class="col-sm-2 col-12">
<h6 style="color:#FFBA00;">Otra cantidad:</h6>
</div>
<div class="col-sm-6 col-12">
<div class='cb-input' style="margin-top: -10px;">
<input id='empresaotra' type="text" name="empresa" placeholder="$" />
</div>
</div>
</div>
<div class="col-12 text-center" style="box-shadow: none; margin-bottom: 0px;">
<label class="acepto" style="padding-left: 20px;">Acepto el compromiso con Banco de Alimentos de Los Mochis I.A.P.</label>
<input type="checkbox" class="option-input checkbox" name="compromiso" value="Acepto el compromiso con Banco de Alimentos de Los Mochis I.A.P." required />
</div>
<div class="col-12 text-center" style="padding-top: 30px; padding-bottom: 30px;">
<button class="btn-amarillo" type="submit" id="submit">envíar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
这是规则:
<script type="text/javascript">
$(document).ready(function() {
$('#celular').mask('(000) 000-0000');
$('.success').fadeOut(0);
var v = $("#invitoform").validate({
rules: {
nombre: {
required: true
},
celular: {
required: true
},
factura: {
required: true,
minlength: 1
},
familia: {
required: true
},
empresa: {
required: true
},
compromiso: {
required: true
}
},
messages: {
nombre: {
required: "Debes escribir tu(s) nombre(s) y apellido(s).",
},
celular: {
required: "Debes de escribir tu número de teléfono.",
minlength: "El número que ingresaste no es válido."
},
factura: {
required: "Debes elegir una opción."
},
familia: {
required: "Debes de elegir una opción o escribir una cantidad."
},
empresa: {
required: "Debes de elegir una opción o escribir una cantidad."
},
compromiso: {
required: "Necesitas aceptar tu compromiso con nosotros antes de continuar."
}
}
})
});
</script>
尽管它们具有相同的名称(2个复选框和文本输入)，但必需"规则似乎不起作用，因为当我填充输入时，仍然需要继续使用其中一个复选框.
Despite they have the same name (the 2 checkboxes and text input) the rule "required" doesn't seem to work because when i fill the input one of the checkboxes are still needed to continue.
推荐答案
尽管它们具有相同的名称(2个复选框和文本输入)，但必需"规则似乎不起作用，因为当我填充输入时，仍需要继续使用其中一个复选框."
什么?您在复选框和文本元素上放置了相同的name吗?甚至没有任何意义，只会忽略第二个实例.
What? You put the same name on checkboxes and text elements? That does not even make any sense and it will just ignore the second instance.
首先，修复name属性，使其具有唯一性.只有该组复选框可以具有相同的name.
First, fix the name attributes so they are unique. Only that grouping of checkboxes can have the same name.
第二，如果要基于某些动态条件更改规则，则可以将条件函数放在规则声明的位置.
Second, if you want to change rules based on some dynamic condition, then you would put conditional functions in place of rule declarations.
rules: {
....
empresa_checkbox: {
required: {
depends: function() {
// checkbox only required when text field is empty
return $('input[name="empresa_text"]').is(':blank');
}
}
},
empresa_text: {
required: {
depends: function() {
// text box only required when checkbox is unchecked
return $('input[name="empresa_checkbox"]').is(':unchecked');
}
}
},
....
},
最后，您不需要在任何元素上使用HTML5 required属性，因为您是在.validate()方法中声明规则的.您应该永久删除它们，以确保它们不会干扰或引起混乱.
And finally, you do NOT need the HTML5 required attribute on any elements since you're declaring your rules within the .validate() method. You should remove those permanently to ensure they don't interfere or cause confusion.
这篇关于当输入充满jQuery Validate插件时，从复选框中删除"required"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
