当输入填充 jQuery 验证插件时，从复选框中删除 'required'
Remove 'required' from checkbox when an input is filled with jQuery Validate plugin
所以我正在做一个包含多个文本输入和复选框的联系表，并使用 jQuery 验证插件进行验证，我想要实现的是：
当文本输入被填充时，应用在复选框上的插件规则的 'required' 属性被删除。
这是我的 HTML（在 bootstrap 模态中：
<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">0.00</span>
<input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya una familia = 0.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">0.00</span>
<input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya dos familias = 0.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">,000.00</span>
<input type="checkbox" class="aportacion option-input checkbox" style="top:10%;" name="empresa" value="Aportacion mensual de 00.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 个复选框和文本输入），但规则 "required" 似乎不起作用，因为当我填写输入时仍然需要其中一个复选框才能继续。
"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."
什么？您在复选框和文本元素上放置了相同的 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 验证插件进行验证，我想要实现的是：
当文本输入被填充时，应用在复选框上的插件规则的 'required' 属性被删除。
这是我的 HTML（在 bootstrap 模态中：
<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">0.00</span>
<input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya una familia = 0.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">0.00</span>
<input type="checkbox" class="familia option-input checkbox" style="top:10%;" name="familia" value="Apoya dos familias = 0.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">,000.00</span>
<input type="checkbox" class="aportacion option-input checkbox" style="top:10%;" name="empresa" value="Aportacion mensual de 00.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 个复选框和文本输入），但规则 "required" 似乎不起作用，因为当我填写输入时仍然需要其中一个复选框才能继续。
"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."
什么？您在复选框和文本元素上放置了相同的 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() 方法中声明您的规则。您应该永久删除这些内容，以确保它们不会造成干扰或造成混淆。