Home / Questions / 301820
Accepted
Andrés Ucero
Asked: 2020-10-18 18:26:10 +0800 CST 2020-10-18 18:26:10 +0800 CST

Client-side form validation with JavaScript

  • 772

what I want is that the data is NOT sent to the server unless a checkbox is selected. Previously the validation was working correctly, after a while it stopped working, not sure if it's a syntax error.

I have the following 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>

and the following code in 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;
  }
}

}
javascript

1 Answers

  1. Best Answer

    To do the validation instead of using document.formyou can use document.getElementsByNameto get the checkboxes:

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

    and then the validation looks like this:

    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>

    You can test that the form is only sent if the checkbox is checked, if it is not checked the alert will appear.

    • 2