Validate at least one checkbox does not work

Question

Validate at least one checkbox does not work

Navigation

#1 by (5 votes)
#2 by (3 votes)

7

I'm doing a validation code for at least one checkbox in javascript.

I relied on this example

Since it allows to stop the process until validation is done.

I can not get the code to work.

function validate(e) {
  var formulario = document.form;
  for (var i = 0; i < form.choice.length; i++) {
    if (form.choice[i].checked === 0) {
      alert ('debes seleccionar al menos una opción');
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    }
  }
}

<form name = "form" onsubmit = "validate(event, this);">
<input type = "checkbox" name = "chice" value = "valor1" />
<input type = "checkbox" name = "chice" value = "valor2" />
<input type = "checkbox" name = "chice" value = "valor3" />
<input type = "checkbox" name = "chice" value = "valor4" />
<input type = "submit" />
</form>

javascript

asked by RTLM-7 21.09.2016 в 00:46

source

2 answers

Wait for a for each with ajax requests to finish to continue How not to repeat variables with the same name for different functions

score 5 · Answer 1

This if it validates at least one - >

	function validate(e) {		
		var formulario = document.form;
		var al_menos_uno = false;

		for (var i = 0; i < formulario.chice.length; i++) {
			if (formulario.chice[i].checked) {
				al_menos_uno = true;
			}
		}

		if (!al_menos_uno){
			alert ('debes seleccionar al menos una opción');
			if (e.preventDefault) {
				e.preventDefault();
			} else {
			e.returnValue = false;
			}
		}
	}

<form name = "form" onsubmit = "validate(event, this);">
<input type = "checkbox" name = "chice" value = "valor1" />
<input type = "checkbox" name = "chice" value = "valor2" />
<input type = "checkbox" name = "chice" value = "valor3" />
<input type = "checkbox" name = "chice" value = "valor4" />
<input type = "submit" />
</form>

score 3 · Answer 2

You are wrongly calling the elements in javascript you currently have your method validate it like this:

function validate(e) {
var formulario = document.form;
for (var i = 0; i < form.choice.length; i++) {
if (form.choice[i].checked === 0) {
alert ('debes seleccionar al menos una opción');
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
}

It should be like this:

function validate(e) {
  var formulario = document.form;
  for (var i = 0; i < formulario.chice.length; i++) { //debes usar tu variable formulario, no form ya que no esta definida
    if (formulario.chice[i].checked === false) { //aqui estabas llamando mal el nombre de los checks esta chice, no choice
      alert ('debes seleccionar al menos una opción');
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    }
  }
}

At the end your script would be:

function validate(e) {
  var formulario = document.form;
  for (var i = 0; i < formulario.chice.length; i++) {
    if (formulario.chice[i].checked === false) {
      alert ('debes seleccionar al menos una opción');
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    }
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Validar</title>
</head>
<body>
<form name = "form" onsubmit = "validate(event, this);">
<input type = "checkbox" name = "chice" value = "valor1" />
<input type = "checkbox" name = "chice" value = "valor2" />
<input type = "checkbox" name = "chice" value = "valor3" />
<input type = "checkbox" name = "chice" value = "valor4" />
<input type = "submit" />
</form>
</body>
</html>

However, this code will validate that all checks are selected.