Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

443
Views
Casilla 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í.

ingrese la descripción de la imagen aquí

¿Cómo lo hago?

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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')">
about 4 years ago · Santiago Trujillo Report

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>
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!