me ayudan a entender y ver la forma correcta de validación de un formulario con Javascript. Estuve realizando varias formas de validar, seguí muchos tutorial, simple y avanzado donde estuve viendo var,let,const, expresiones, =>, pero no comprendí al 100% claro, es por que no tengo buena base en Javascript, lo cual tengo que buscar un buen curso para aprender. Ahora, me podrían ayudar a corregir las validaciones, la única que toma hasta el momento es el primer input "tabla_reg". Me gustaría validar el select y file, los demás no son obligatorios solo validar los caracteres. Lo hice de muchas formas, pero quede con esta, y quedo estancando en en el select y file. ¿Cuál sería una buena forma para validar mi formulario?. Si no es mucha la molestia, como se hace para que aparezca el código ejecutable en stackOverflow?. Se los agradecería mucho, gracias por su tiempo :)
// Validaremos los campos INPUT
function validarInput() {
// Variable que usaremos para determinar si el input es Valido.
let isValid = false;
// Los Inputs
const input = document.forms['guardar_evento']['tabla_reg'];
const select = document.forms['guardar_evento']['select_responsabilidad'];
// Mensaje de error
const message = document.getElementById('formulario__input-error');
input.willValidate = false;
select.willValidate = false;
// expresion
const val_input = new RegExp('/^[a-zA-Z0-9\_\-]{0,8}$/');
const val_select = document.getElementById('select_responsabilidad').innerHTML = "";
// Validacion Servicio
if (!val_input.test(input.value)) {
isValid = false;
} else {
isValid = true;
}
if (!val_select.test(select.value)) {
isValid = false;
} else {
isValid = true;
}
}
// función que verificar validación
function verificar() {
const valido = validarInput();
if (!valido) {
alert('No Se Permiten ·$"%&/(&/¨^*Ǩ.', input);
} else {
alert('Formulario Correcto y listo para guardar.');
}
}
HTML
<!-- Save Evento-->
<form action="{% url 'save_evento' interno=bus.interno %}" id="guardar_evento" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<div class="container ">
<div class="row d-flex justify-content-center transparent_background_detalle_interno">
<div class="col-md-5">
<div class="row">
<div class="col-10">
<!-- Grupo: Tabla -->
<div class="formulario__grupo" id="grupo__tabla">
<label for="tabla_reg" class="formulario__label">TABLA</label>
<div class="formulario__grupo-input">
<input type="tel" class="formulario__input" id="tabla_reg"
placeholder="Ingrese el Servicio" minlength="3" maxlength="8"
name="tabla_reg" value="{{tabla_ret}}">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">No Se Aceptan, *^¨Ç¨"$%$/)/·</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-10">
<!-- Grupo: Código -->
<div class="formulario__grupo" id="grupo__codigo">
<label for="cod_operador" class="formulario__label">CÓDIGO OB </label>
<div class="formulario__grupo-input">
<input type="tel" class="formulario__input" id="cod_operador"
placeholder="Ingrese el Código" minlength="1" maxlength="4"
name="cod_operador" value="{{codigo_ret}}">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">No Se Aceptan, *^¨Ç¨"$%$/)/·</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<!-- Grupo: Código -->
<div class="col-10">
<h3 class="partes_seleccionadas">RESPONSABILIDAD</h3>
<select class="bg-warning form-control form-control" id="select_responsabilidad"
name="responsabilidad" >
<option value="0" {% if responsabilidad_ret == "" %}selected{% endif %} disabled>
Seleccione Una Responsabilidad
</option>
<option value="O" {% if responsabilidad_ret == "O" %}selected{% endif %}>
Operaciones
</option>
<option value="V" {% if responsabilidad_ret == "V" %}selected{% endif %}>
Vandalismo
</option>
<option value="M" {% if responsabilidad_ret == "M" %}selected{% endif %}>
Mantenimiento
</option>
</select>
</div>
</div>
</div>
<!-- <div class="col-md-5 m-3 p-3 rounded-lg rgba-stylish-strong" id="graffiti_section"
style="display: none;">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="graffiti" type="checkbox" name="graffiti">
<label class="custom-control-label" for="graffiti">Tiene graffiti?</label>
</div>
</div> -->
<div class="col-md-5">
<div class="row">
<div class="col-10">
<h3 class="partes_seleccionadas">LINEA DE RECORRIDO</h3>
<input type="text" class="border rounded border-primary form-control"
id="tabla_linea" placeholder="Ingrese el Recorrido" minlength="3" maxlength="10"
name="tabla_linea" value="{{linea_ret}}">
</div>
</div>
</div>
<div class="col-md-5">
<div class="row mt-4">
<div class="col-10">
<h3 class="partes_seleccionadas">OBSERVACIÓN</h3>
<input type="text" class="form-control" name="observacion" id="observacion"
value="{{observacion_ret}}">
</div>
</div>
</div>
<div class="col-md-12">
</div>
</div>
</div>
<div class="container p-3">
<h4 class="evento_detalle_title mt-2 mb-2">TOMAR FOTO</h4>
<div class="row">
<div class="col-12">
<input type="file" id="foto1" name="foto1"
accept="image/png, .jpeg, .jpg, image/gif;capture=camera" class="input-foto"
onchange="detectFile(this, 1)" value="{{foto1_ret}}" required>
<label id="input_foto1" class="border rounded col-12 label-foto" for="foto1">
<i class="fa fa-camera-retro icon_base" id="icon_upload1"></i> Foto 1
</label>
</div>
<div class="col-12">
<input type="file" id="foto2" name="foto2"
accept="image/png, .jpeg, .jpg, image/gif;capture=camera" class="input-foto"
onchange="detectFile(this, 2)">
<label id="input_foto2" class="border rounded col-12 label-foto" for="foto2">
<i class="fa fa-camera-retro icon_base" id="icon_upload2"></i> Foto 2
</label>
</div>
<div class="col-12">
<input type="file" id="foto3" name="foto3"
accept="image/png, .jpeg, .jpg, image/gif;capture=camera" class="input-foto"
onchange="detectFile(this, 3)">
<label id="input_foto3" class="border rounded col-12 label-foto" for="foto3">
<i class="fa fa-camera-retro icon_base" id="icon_upload3"></i> Foto 3
</label>
</div>
</div>
</div>
<div class="container p-1">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 btn_flota mb-1">
<a class="btn btn-dark btn-block" href="{% url 'buscar_interno' %}">Buscar otro interno</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 btn_flota mb-3">
<input class="btn btn-success btn-block" onclick="validarEvento();" type="submit" value="Guardar" />
</div>
<div class="formulario__mensaje" id="formulario__mensaje">
<p><i class="fas fa-exclamation-triangle"></i> <b>Error:</b> Por favor rellena el formulario
correctamente. </p>
</div>
</div>
</div>
</form>