Estoy validando un formulario en el que todos los campos deben ser requeridos. Por esto, cree un script con jQuery en el que valida todos los campos. En teoría, debería habilitarse el botón de enviar en cuanto todos los campos tengan valor maor a 0 o vacío:
var nuevo = 1;
function agregarAutores() {
var campo = '<div id="autor' + nuevo + '"><br><div class="row"><div class="col-xs-8 col-sm-8 col-md-8 col-lg-8"><input type="text" class="form-control" name="autoresArticulos[]" placeholder="Nombre completo del autor..." required autocomplete="off"></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><button type="button" class="btn-rojo rippler rippler-default" onclick="eliminarAutor(' + nuevo + ');" style="padding: .4em 1.1em;">-</button></div></div></div>';
$("#contenedorAutores").append(campo);
nuevo++;
};
function eliminarAutor(id) {
$("#autor" + id).remove();
}
$(document).on("keyup", "#formularioArticulo input", function(e) {
var formulario = $(this).parents("#formularioArticulo");
var input = validarInputs(formulario);
var select = validarSelect(formulario);
if (input && select) {
$("#subirArticulo").removeAttr('disabled');
} else {
$("#subirArticulo").attr('disabled', 'disabled');
}
});
$(document).on("change", "#formularioArticulo select", function(e) {
var formulario = $(this).parents("#formularioArticulo");
var input = validarInputs(formulario);
var select = validarSelect(formulario);
if (input && select) {
$("#subirArticulo").removeAttr('disabled');
} else {
$("#subirArticulo").attr('disabled', 'disabled');
}
});
$(document).on("focus", "input, select", function(e) {
$(this).css('border-color', '#CED4DA');
});
function validarInputs(objeto) {
objeto.find("input").each(function() {
if ($(this).val() <= 0 || $(this).val() == "") {
$(this).css('border-color', '#EF3109');
} else {
return true;
}
});
}
function validarSelect(objeto) {
objeto.find("select").each(function() {
if ($(this).val() <= 0 || $(this).val() == "") {
$(this).css('border-color', '#EF3109');
} else {
return true;
}
});
}
#formularioArticulo {
background-color: #FFFFFF;
width: 30%;
margin: auto;
padding: 1em;
border: 2px solid #666666;
border-radius: 10px;
margin-top: 3%;
margin-bottom: 2%;
}
button {
padding: .6em 1.1em;
border: transparent;
border-radius: 5px;
position: relative;
text-transform: uppercase;
overflow: hidden;
-webkit-box-shadow: 0px 3px 5px 0px #3B3B3B;
-moz-box-shadow: 0px 3px 5px 0px #3B3B3B;
box-shadow: 0px 3px 5px 0px #3B3B3B;
outline: none;
width: 80%;
margin-left: 10%;
border: none;
opacity: .6;
}
button:not(:disabled) {
cursor: pointer;
opacity: 1;
}
button:disabled {
opacity: .6;
}
.btn-rojo {
background-color: #EF3109;
color: #FFFFFF;
}
.btn-amarillo {
background-color: #F5C518;
color: #FFFFFF;
}
.btn-azul {
background-color: #1976D2;
color: #FFFFFF;
}
.btn-send {
background-color: #2A8D32;
color: #FFFFFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formularioArticulo" method="POST">
<div class="form-group">
<label for="nombreRegistrador">Nombre completo:</label>
<input type="text" class="form-control" name="nombreRegistrador" id="nombreRegistrador" placeholder="Nombre completo de quién registra el artículo..." required autocomplete="off">
</div>
<div class="form-group">
<label for="apellidoRegistrador">Apellido completo:</label>
<input type="text" class="form-control" name="apellidoRegistrador" id="apellidoRegistrador" placeholder="Apellido completo de quién registra el artículo..." required autocomplete="off">
</div>
<div class="form-group">
<label for="correoRegistrador">Correo electrónico:</label>
<input type="email" class="form-control" name="correoRegistrador" id="correoRegistrador" placeholder="Correo electrónico de quién registra el artículo..." required autocomplete="off">
<small class="form-text text-muted">El correo electrónico será la primer vía de contacto entre el comité editorial y el Registrador.</small>
</div>
<div class="form-group">
<label for="celularRegistrador">Número de contacto:</label>
<input type="number" class="form-control" name="celularRegistrador" id="celularRegistrador" placeholder="Número de contacto de quién registra el artículo..." required autocomplete="off">
<small class="form-text text-muted">El número de contacto será una vía alterna de contacto.</small>
</div>
<div class="form-group">
<label for="institucionArticulo">Institución que representa el artículo:</label>
<input type="text" class="form-control" name="institucionArticulo" id="institucionArticulo" placeholder="Institución que representa el artículo..." required autocomplete="off">
<small class="form-text text-muted">Ingrese el nombre completo de la institución que representa este artículo.</small>
</div>
<div class="form-group" id="contenedorAutores">
<label for="autoresArticulos">Ingresa el nombre de los autores:</label>
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" name="autoresArticulos[]" id="autoresArticulos" placeholder="Nombre completo del autor..." required autocomplete="off">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button type="button" class="btn-amarillo rippler rippler-default" onclick="agregarAutores();" style="padding: .4em 1.1em;">+</button>
</div>
</div>
</div>
<div class="form-group">
<label for="areaArticulo">Área del conocimiento del artículo:</label>
<select class="form-control" name="areaArticulo" id="areaArticulo">
<option value="">Selecciona un área de conocimiento</option>
<option value="Agronomía, veterinaria y afines">Agronomía, veterinaria y afines</option>
<option value="Bellas artes">Bellas artes</option>
<option value="Ciencias de la educación">Ciencias de la educación</option>
<option value="Ciencias de la salud">Ciencias de la salud</option>
<option value="Ciencias sociales y humanas">Ciencias sociales y humanas</option>
<option value="Economía, administración, contaduría y afines">Economía, administración, contaduría y afines</option>
<option value="Matemáticas y ciencias naturales">Matemáticas y ciencias naturales</option>
</select>
</div>
<div class="form-group">
<label for="documentoArticulo">Ingrese el artículo:</label>
<input type="file" class="form-control-file" name="documentoArticulo" id="documentoArticulo" required>
<small class="form-text text-muted">El artículo debe tener el <a href="../archivos/plantilla/Guia_Articulo.docx" download="Plantilla formato artículos.docx">formato estipulado</a> en las <a href="../nosotros/" target="_BLANK">instrucciones</a>.</small>
</div>
<div class="button-group">
<button type="submit" id="subirArticulo" class="btn-send rippler rippler-default" disabled>Enviar Artículo</button>
</div>
</form>
¿Cómo podría realizar esa validación para cuando todos los campos estén llenos, habilitar en botón?