当输入充满jQuery Validate插件时，从复选框中删除“ required”
因此，我正在使用带有多个文本输入和复选框的联系表单，并使用jQuery Validate插件进行验证，而我想实现的目标是：
在输入文本时，复选框中所添加插件规则的'required'属性将被删除。
这是我的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个复选框和文本输入），但“必需”规则似乎不起作用，因为当我填充输入时，仍然需要继续使用其中一个复选框。
1 个答案:
答案 0 :(得分：1)
“尽管它们具有相同的名称（2个复选框和文本输入），但“必需”规则似乎不起作用，因为当我填充输入时，仍然需要继续使用其中一个复选框。” < / em>
什么？您在复选框和文本元素上放置了相同的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()方法中声明规则的。您应该永久删除它们，以确保它们不会干扰或引起混乱。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？