1

lo que quiero es que NO se envíen los datos al servidor a menos que se seleccione un checkbox. Anteriormente la validación funcionaba correctamente, después de un tiempo dejó de funcionar, no estoy seguro si es un error de sintaxis.

Tengo el siguiente HTML:

<form class="form-group" method="post" name="form" onsubmit = "validarCI(event, this);" action="{{ action('ProductoController@store') }}" enctype="multipart/form-data">
@csrf
 <table class="table" >
    @foreach($costoIndirecto as $ci)
     <tr>
      <td>
         <input type="checkbox" name="ci[]" value="{{$ci['id']}}"> {{$ci['nombre']}} - {{$ci['valor']}} Bs
      </td>
     </tr>

    @endforeach
        </table>  
  </form>

y el siguiente código en JavaScript

function validarCI(e) {   
var formulario = document.form;
var ci = false;
for (var i = 0; i < formulario.ci.length; i++) {
  if (formulario.ci[i].checked) {
    ci = true;
  }
}

if (!ci){
  alert ('Debe seleccionar al menos un costo indirecto');
  if (e.preventDefault) {
    e.preventDefault();
  } else {
  e.returnValue = false;
  }
}

}

1 respuesta 1

2

Para hacer la validación en lugar de usar document.form puedes usar document.getElementsByName para obtener los checkbox:

var formulario = document.getElementsByName('ci[]');

y luego la validación te queda así:

function validarCI(e) {   
  var formulario = document.getElementsByName('ci[]');
  var ci = false;
  for (var i = 0; i < formulario.length; i++) {
    if (formulario[i].checked) {
      ci = true;
    }
  }

  if (!ci){
    alert ('Debe seleccionar al menos un costo indirecto');
    if (e.preventDefault) {
      e.preventDefault();
    } else {
    e.returnValue = false;
    }
  }
}
<form class="form-group" method="post" name="form" onsubmit = "validarCI(event, this);" action="{{ action('ProductoController@store') }}" enctype="multipart/form-data">
@csrf
 <table class="table" >
    @foreach($costoIndirecto as $ci)
     <tr>
      <td>
         <input type="checkbox" name="ci[]" value="{{$ci['id']}}"> {{$ci['nombre']}} - {{$ci['valor']}} Bs
      </td>
     </tr>

    @endforeach
        </table>  
        
        <button >Enviar</button>
        
  </form>

Puedes probar que el formulario solo se envia si se marca el checkbox, si no se marca aparecerá el alert.

2
  • 1
    Muchas gracias, funciona perfectamente Commented el 18 oct. 2019 a las 13:52
  • @AndrésUcero que bien (ノ・∀・)ノ de nada.
    – erika_chan
    Commented el 18 oct. 2019 a las 23:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.