He intentado validar este formulario, pero me es imposible ya que hay dos campos que debo validar por el nombre pero sus nombres son arrays select name = "receta[]" y el input name="cantidad[]" y no sé como validar estos campos.
Necesito validar todos los campos incluyendo el select name = "receta[]" y el input name="cantidad[]"
Este es mi formulario
<form name="formulario" action="guardar_produccion.php" method="post">
<input class="form-control mr-sm-2 col-10" type="date" name="fecha" id="fecha">
<select name="usuario" id="usuario" class="form-control mr-sm-2 col-10">
<option>- Seleccione </option>
<?php
while ($datos = mysqli_fetch_array($consulta_usuario)) { //array recorre datos
?>
<option value="<?php echo $datos['documento'] ?>"> <?php echo $datos['nombres'] ?> </option>
<?php } ?>
</select>
<select id="receta" name="receta[]" class="col-12 form-control mr-sm-2 "
onchange="cambioOpciones1(), cambioOpciones()">
<option value="" disabled selected> - Seleccione - </option>
<?php
while ($datos = mysqli_fetch_array($consulta_receta)) {
?>
<option value="<?php echo $datos['codigo'] ?>"
data-nombre="<?php echo $datos['producto'] ?>"
data-nombre1="<?php echo $datos['descripcion'] ?>">
<?php echo $datos['codigo'] ?> </option>
<?php } ?>
</select>
<input id="cantidad" name="cantidad[]" type="number" min="1" class="form-control mr-sm-2 col-12"></input>
<input type="submit" class="btn btn-primary" value="CREAR ORDEN" id="boton">
</form>
Y tengo este código de validación
(function() {
//acceder al formulario
var formulario = document.getElementsByName("formulario")[0],
elementos = formulario.elements, //se accede a los elementos
boton = document.getElementById("boton");
var validarFecha = function(e) {
if (formulario.fecha.value == '' || formulario.fecha.value == 0) {
alert("Eliga una fecha de creación de la orden de producción.");
e.preventDefault();
}
};
var validarUsuario = function(e) {
if (!formulario.usuario.value) {
alert("Que empleado esta a cargo de la orden de producción?");
e.preventDefault();
}
};
var validarReceta = function(e) {
// Se accede por nombre del campo, incluyendo los corchetes
receta = formulario.querySelector('[name="receta[]"]');
// Se analiza el valor, no el campo
if (!receta.value) {
alert("Complete el campo RECETA de creación.");
e.preventDefault();
} else {
console.log("Sí funciona, este es el valor: " + receta.value);
}
};
var validarCantidad = function(e) {
if (formulario.cantidad.value == 0) {
alert("Debe elegir que cantidad de cada receta necesita ejecutar");
e.preventDefault();
}
};
var validar = function(e) {
validarFecha(e);
validarReceta(e);
validarUsuario(e);
validarCantidad(e);
};
formulario.addEventListener("submit", validar);
}())
El código de validación solo es funcional hasta el campo de la fecha y después de que valida ese campo sale este error en la consola
produccion.js:29 Uncaught TypeError: Cannot read property 'value' of null
at validarReceta (produccion.js:29)
at HTMLFormElement.validar (produccion.js:49)
Sospecho que algo tiene que ver el nombre de ese select que es receta[] y no receta, pero esto no lo puedo cambiar ya que es necesario para otros asuntos del formulario.
formulario.querySelector('[name="receta[]"]')