当输入填充有 jQuery Validate 插件时，从复选框中删除“必需”
Posted
技术标签:
【中文标题】当输入填充有 jQuery Validate 插件时，从复选框中删除“必需”【英文标题】：Remove 'required' from checkbox when an input is filled with jQuery Validate plugin 【发布时间】：2019-11-27 22:48:04 【问题描述】：所以我做了一个包含几个文本输入和复选框的联系表单，并使用 jQuery Validate 插件进行验证，我想要实现的是：
当文本输入被填充时，应用在复选框上的插件规则中的“必需”属性被删除。
这是我的 html（在引导模式中：
<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 个复选框和文本输入），但“必需”规则似乎不起作用，因为当我填写输入时，仍需要其中一个复选框才能继续。
【问题讨论】：
您不能让复选框和文本框共享相同的name 属性！这没有任何意义，插件将忽略其中一个。
在下面发布了一个答案，解释了如何做到这一点。
@Sparky 非常感谢你帮助我！！但是现在我有一个新问题：当您选中其中一个复选框时，我无法发送表单，因为需要输入 idk 为什么：（
我不知道你做错了什么。为什么不构建一个 jsFiddle 演示给我们看呢？
【参考方案1】：
“尽管它们具有相同的名称（两个复选框和文本输入），但“必需”规则似乎不起作用，因为当我填写输入时，仍然需要其中一个复选框才能继续。”
什么？你把相同的name 放在复选框和文本元素上？这甚至没有任何意义，它只会忽略第二个实例。
首先，修复name 属性，使其唯一。只有该组复选框可以具有相同的name。
其次，如果你想根据一些动态条件改变规则，那么你可以用条件函数代替规则声明。
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() 方法中声明了您的规则。您应该将它们永久删除，以确保它们不会干扰或引起混淆。
【讨论】：
以上是关于当输入填充有 jQuery Validate 插件时，从复选框中删除“必需”的主要内容，如果未能解决你的问题，请参考以下文章
jquery.validate 当验证正确之后为啥错误信息没有移除？
当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件，至少要选择两次时间，才能验证成功的问题
JQuery Validate插件如何自定义验证方法（结合ajax实现数据库的查重）