JavaScript - Validación de formulario en JavaScript

 
Vista:

Validación de formulario en JavaScript

Publicado por Diana (4 intervenciones) el 12/08/2018 06:29:35
Estoy validando los formularios mediante HTML5. El problema es que cuando doy click en el botón no se encuentra validado el formulario.

Código de validación:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Este campo no puede quedar en blanco");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
    var elements = document.getElementsByTagName("SELECT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Debe seleccionar una especialidad");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
});


En siguiente código es donde tengo el evento del botón:

1
2
3
4
$( "#submit" ).click(function() {
  solicitarCita($('#nombre').val(),$('#apellidos').val(),$('#id').val(),$('#email').val(),$('#telefono').val(),$('#especialidad').val(),$('#fecha').val(),$('#hora').val(),$('#notas').val());
 
});

No se si tengo que agregarle algo extra al evento del botón para que valide....
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 2.981
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de formulario en JavaScript

Publicado por xve (2096 intervenciones) el 12/08/2018 14:11:31
Hola Diana, no entiendo bien tu código... según veo, en la función solicitarCita() es donde haces la validación? o que hay en esa función?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Validación de formulario en JavaScript

Publicado por Diana (4 intervenciones) el 13/08/2018 04:22:17
Hola, mi idea es que solicitarCita() se ejecute después de realizar la validación. El problema es que siempre si ejecuta incluso cuando no se encuentre validado el formulario.

Este es el form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<form id="apply_form" method="post">
    <ul class="form-style-1">
        <li>
            <label>Nombre Completo <span class="required">*</span></label>
            <input type="text" name="nombre" id="nombre" class="field-divided" placeholder="Nombre" required />&nbsp;<input type="text" name="apellidos" id="apellidos" class="field-divided" placeholder="Apellidos" required />
        </li>
        <li>
            <label>Identificación <span class="required">*</span></label>
            <input required placeholder="#-####-####" type="text" name="id" id="id" class="field-long"  />
        </li>
        <li>
            <label>Correo electrónico <span class="required">*</span></label>
            <input required placeholder="nom@gmail.com" type="email" name="email" id="email" class="field-long" pattern="^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$"/>
        </li>
        <li>
            <label>Teléfono <span class="required">*</span></label>
            <input required placeholder="xxxx-xxxx" type="text" name="telefono" id="telefono" class="field-long" pattern="[0-9]" />
        </li>
        <li>
            <label>Especialidad<span class="required">*</span></label>
            <select name="especialidad" id="especialidad" class="field-select" required>
            <option value="Medicina General">Medicina General</option>
            <option value="Odontología">Odontología</option>
            <option value="Ginecología y Obstetricia">Ginecología y Obstetricia</option>
            <option value="Pediatría">Pediatría</option>
            <option value="Terapia Física">Terapia Física</option>
            </select>
        </li>
        <li>
            <label>Fecha de cita<span class="required">*</span></label>
            <input id="fecha" type="date" required="">
        </li>
        <li>
            <label>Hora de cita<span class="required">*</span></label>
            <input id="hora" type="time" required="">
        </li>
        <li>
            <label>Nota </label>
            <textarea name="notas" id="notas" class="field-long field-textarea"></textarea>
        </li>
        <li>
            <input type="submit" id="submit" value="Continuar" />
        </li>
    </ul>
</form>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 2.981
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de formulario en JavaScript

Publicado por xve (2096 intervenciones) el 13/08/2018 08:06:40
Hola Diana, con el código que nos muestras, solo puede ser llamado cuando se hace click en el id="submit"...

Puede ser que lo estes llamando desde otra parte del código?

Has probado a comentar la linea que llama a la función haber si se sigue ejecutando?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 480
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de formulario en JavaScript

Publicado por abzerox (126 intervenciones) el 12/08/2018 23:47:04
Hola, seguramente debas prevenir el evento por defecto del bóton submit el cual es enviar el formulario. Para esto debes usar el método preventDefault del objeto event.

1
2
3
4
$( "#submit" ).click(function(event) {
 event.preventDefault();
 solicitarCita($('#nombre').val(),$('#apellidos').val(),$('#id').val(),$('#email').val(),$('#telefono').val(),$('#especialidad').val(),$('#fecha').val(),$('#hora').val(),$('#notas').val());
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Validación de formulario en JavaScript

Publicado por Diana (4 intervenciones) el 13/08/2018 04:24:55
Hola. Gracias pero no funciona....
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Validación de formulario en JavaScript

Publicado por Diana (4 intervenciones) el 13/08/2018 10:35:17
Gracias por la colaboración de todos. La solución a mi problema fue:

Eliminar todo este código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Este campo no puede quedar en blanco");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
    var elements = document.getElementsByTagName("SELECT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Debe seleccionar una especialidad");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
});

Y en cambio agregar estas líneas al evento:

1
2
3
4
5
6
7
$( "#submit" ).click(function() {
    if (document.getElementById('apply_form').checkValidity()) {
        solicitarCita($('#nombre').val(),$('#apellidos').val(),$('#id').val(),$('#email').val(),
            $('#telefono').val(),$('#especialidad').val(),$('#fecha').val(),$('#hora').val(),$('#notas').val());
        alert("Validado");
    }
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 2.981
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validación de formulario en JavaScript

Publicado por xve (2096 intervenciones) el 13/08/2018 12:23:07
Gracias por comentarlo Diana!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar