0

Estoy intentando Validar los campos de input del formulario utilizando Jquery , sin embargo no he podido conseguir mis resultados despues de varios intentos . El resultado que quiero conseguir es un texto al lado de las cajas que indique que o llenen la caja o ingresen datos validos.

he tratado de implementar Jquery de la siguientes maneras:

<head>
<meta charset="UTF-8">
<title>add</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
    $(document).ready(function () {
        $("#myForm").validate({
            rules: {
                TxtNombre: {
                    required: true
                },
                TxtApellidos: {
                    required: true
                },
                TxtCel: {
                    required: true,
                    minlength: 10
                },
                inputEmail: {
                    required: true,
                    email: true
                },
                InputURL: {
                    required: true,
                    url: true
                }
            },
            messages: {
                TxtNombre: {
                    required: "Por favor, ingrese su nombre"
                },
                TxtApellidos: {
                    required: "Por favor, ingrese sus apellidos"
                },
                TxtCel: {
                    required: "Por favor, ingrese su número de teléfono",
                    minlength: "Su número de teléfono debe tener 8 dígitos"
                },
                inputEmail: {
                    required: "Por favor, ingrese su correo electrónico",
                    email: "Por favor, ingrese un correo electrónico válido"
                },
                InputURL: {
                    required: "Por favor, ingrese la URL de su foto",
                    url: "Por favor, ingrese una URL válida"
                }
            }
        });
    });
</script>

segun tengo entendido deberia de enseñar mensajes de error cada vez que presiono submit , sin embargo eso no pasa.

Mi ultimo intento fue:

<head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#myForm").validate({
                rules: {
                    TxtNombre: {
                        required: true
                    },
                    TxtApellidos: {
                        required: true
                    },
                    TxtCel: {
                        required: true,
                        minlength: 10
                    },
                    inputEmail: {
                        required: true,
                        email: true
                    },
                    InputURL: {
                        required: true,
                        url: true
                    }
                },
                messages: {
                    TxtNombre: {
                        required: "Por favor, ingrese su nombre"
                    },
                    TxtApellidos: {
                        required: "Por favor, ingrese sus apellidos"
                    },
                    TxtCel: {
                        required: "Por favor, ingrese su número de teléfono",
                        minlength: "Su número de teléfono debe tener al menos 8 dígitos"
                    },
                    inputEmail: {
                        required: "Por favor, ingrese su correo electrónico",
                        email: "Por favor, ingrese un correo electrónico válido"
                    },
                    InputURL: {
                        required: "Por favor, ingrese la URL de su foto",
                        url: "Por favor, ingrese una URL válida"
                    }
                },
                onfocusout: function (element) {
                    this.element(element);
                }
            });
        });


        $(document).ready(function () {
            $('#myForm').validate({
                rules: {
                    TxtNombre: {
                        required: true
                    },
                    TxtApellidos: {
                        required: true
                    },
                    TxtCel: {
                        required: true,
                        minlength: 10
                    },
                    inputEmail: {
                        required: true,
                        email: true
                    },
                    InputURL: {
                        required: true,
                        url: true
                    }
                },
                messages: {
                    TxtNombre: {
                        required: "Por favor, ingrese su nombre"
                    },
                    TxtApellidos: {
                        required: "Por favor, ingrese sus apellidos"
                    },
                    TxtCel: {
                        required: "Por favor, ingrese su número de teléfono",
                        minlength: "Su número de teléfono debe tener al menos 8 dígitos"
                    },
                    inputEmail: {
                        required: "Por favor, ingrese su correo electrónico",
                        email: "Por favor, ingrese un correo electrónico válido"
                    },
                    InputURL: {
                        required: "Por favor, ingrese la URL de su foto",
                        url: "Por favor, ingrese una URL válida"
                    }
                },
                onfocusout: function (element) {
                    this.element(element);
                },
                submitHandler: function (form) {
                    //Ni idea ahora
                    alert('El formulario se envió correctamente!');
                    form.submit(); // Si deseas enviar el formulario después de la validación exitosa
                    return false; // Si no deseas enviar el formulario después de la validación exitosa
                }
            });
        });

    </script>

</head>

<div class="container">
    <form class="row" id="myForm">
        <!-- Lado izquierdo -->
        <div class="col-6">
            <div>
                <label for="TxtNombre" class="form-label">Nombres</label>
                <input type="text" class="form-control" id="TxtNombre" name="TxtNombre">
                <div class="invalid-feedback"></div>
            </div>
            <div class="my-4">
                <label for="genero">Genero</label>
                <select class="form-select" id="genero" name="genero" aria-label="Seleccionar">
                    <option value="">Seleccione su genero</option>
                    <option value="Masculino">Masculino</option>
                    <option value="Femenino">Femenino</option>
                </select>
                <div class="invalid-feedback"></div>
            </div>
            <div class="my-4">
                <label for="sangre">Tipo de Sangre</label>
                <select class="form-select" id="sangre" name="sangre" aria-label="Seleccionar">
                    <option value="">Seleccione su tipo de sangre</option>
                    <option value="O+">O+</option>
                    <option value="O-">O-</option>
                    <option value="A+">A+</option>
                    <option value="A-">A-</option>
                    <option value="B+">B+</option>
                    <option value="B-">B-</option>
                    <option value="AB+">AB+</option>
                    <option value="AB-">AB-</option>
                </select>
                <div class="invalid-feedback"></div>
            </div>
            <div>
                <button class="btn btn-primary" type="submit">Ingresar</button>
            </div>

        </div>
        <!-- Lado derecho -->
        <div class="col-6">
            <div>
                <label for="TxtApellidos" class="form-label">Apellidos</label>
                <input type="text" class="form-control" id="TxtApellidos" name="TxtApellidos">
                <div class="invalid-feedback"></div>
            </div>
            <div>
                <label for="TxtCel" class="form-label">Telefono Personal</label>
                <input type="tel" class="form-control" id="TxtCel" name="TxtCel">
                <div class="invalid-feedback"></div>
            </div>
            <div>
                <label for="inputEmail" class="form-label">Email</label>
                <input type="email" class="form-control" id="inputEmail" name="inputEmail">
                <div class="invalid-feedback"></div>
            </div>
            <div>
                <label for="InputURL" class="form-label">Fotografia</label>
                <input type="url" class="form-control" id="InputURL" name="InputURL">
                <div class="invalid-feedback"></div>
            </div>
        </div>
    </form>
</div>

cualquier aclaracion seria de gran ayuda ya que no tengo mucha experiencia con cshtml. Algo a mencionar que tengo los nuggets / librerias las tengo instaladas , es un proyecto MVC , utilizando capas en .net framework

1 respuesta 1

0

Actualiza el jquery validation. Cambia:

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

por:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

Pon algo de estilos:

       <style>
        form .error{
           color: red;
         }
        
         input.error{
          border-color: red;
         }
      </style>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.