0
442
VistasCasilla de verificación múltiple: mensaje de cambio "Marque esta casilla si desea continuar"
Tengo un formulario de casilla de verificación de selección múltiple al que agrego un JS para asegurarme de que el visitante seleccione al menos una opción
<div class="form-group options"> <label class="control-label col-md-4" for="optiontext">Specify an option</label> <div class="col-md-6"> <input type="checkbox" name="option[]" value="option1" required/> Option 1<br> <input type="checkbox" name="option[]" value="option2" required/> Option 2<br> <input type="checkbox" name="option[]" value="option3" required/> Option 3<br> <input type="checkbox" name="option[]" value="option4" required/> Option 4<br> <input type="checkbox" name="option[]" value="option5" required/> Option 5<br> <input type="checkbox" name="option[]" value="option6" required/> Option 6<br> <input type="checkbox" name="option[]" value="option7" required/> Option 7 </div>ese es el js
$(function(){ var requiredCheckboxes = $('.options :checkbox[required]'); requiredCheckboxes.change(function(){ if(requiredCheckboxes.is(':checked')) { requiredCheckboxes.removeAttr('required'); } else { requiredCheckboxes.attr('required', 'required'); } });Ahora TODO FUNCIONA bien, lo único es que el mensaje de error que aparece es Marque esta casilla si desea continuar , pero me gustaría que el mensaje fuera Seleccione al menos una opción para continuar como se ilustra en la imagen aquí.
¿Cómo lo hago?
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
Es muy sencillo controlar los mensajes personalizados con la ayuda del evento HTML5 oninvalid
Código:
<input type="checkbox" value="option1" oninvalid="this.setCustomValidity('Please select at least one option to proceed')">
·
Santiago Trujillo
Denunciar
0
Implementé esto de la siguiente manera:
<html> <head> <title>test</title> </head> <body> <form> <input type="checkbox" id="sterms" value="Agreed-to-Terms" onclick ="if (!this.checked) {this.setCustomValidity('برای ادامه لطفا این گزینه را تیک بزنید.');} else {this.setCustomValidity('');}" required> <a href="privacy-policy.html">قوانین و شرایط استفاده را می پذیرم.</a> <button type="submit" class="form-control-submit-button">انجام آزمایش</button> </form> <script type="text/javascript"> document.getElementById("sterms").setCustomValidity('برای ادامه لطفا این گزینه را تیک بزنید.'); </script> </body> </html>
·
Santiago Trujillo
Denunciar
Responde la pregunta