1

Antes de enviar los datos del formulario, llamo a una funcion hecha en js llamada checkAdminData(). Dentro de esta misma tengo una función validarCamposInput() que verifica que no haya campos vacios. Si no hay campos vacios, verifico que el email sea correcto con la funcion validateEmail() y por ultimo verifico que ambas contraseñas sean iguales con la funcion EqualPasswords(). Cuando hay campos vacios validarCamposInput() funciona perfectamente. El problema esta cuando no hay campos vacíos, ya que pasa a verificar el email y si esta mal me lo informa, pero de todas formas envía los datos al controlador.

Este el formulario

@using (Html.BeginForm("RegistrarAdmin", "Home", FormMethod.Post, new { name = "formAdmin" }))
    {
        @Html.AntiForgeryToken()

        <div id="cont-formulario-admin">

            <div class="form-group">
                <label for="lblEmail">Email:</label>
                <input type="email" class="form-control" id="txtEmail" name="txtEmail" onkeyup="return removeClass(this);" maxlength="45" placeholder="Email" required>
            </div>

            <div class="form-group">
                <label for="lblName">Nombre:</label>
                <input type="text" class="form-control a" id="txtName" name="txtName" onkeyup="return removeClass(this);" maxlength="45" placeholder="Nombre" required>
            </div>

            <div class="form-group">
                <label for="lblApe">Apellido:</label>
                <input type="text" class="form-control" id="txtSurname" name="txtSurname" onkeyup="return removeClass(this);" maxlength="45" placeholder="Apellido" required>
            </div>

            <div class="form-group">
                <label for="lblPwd">Contraseña:</label>
                <input type="password" class="form-control" name="txtClave1" onkeyup="return removeClass(this);" id="clave1" maxlength="45" placeholder="Contraseña" required>
            </div>

            <div class="form-group">
                <label for="lblPwd">Repita la contraseña:</label>
                <input type="password" class="form-control" name="txtClave2" onkeyup="return removeClass(this);" id="clave2" maxlength="45" placeholder="Repetir contraseña" required>
            </div>

            <div id="button-group">
                <button class="btn btn-primary" id="btn-guardar" onclick="checkAdminData();">Guardar</button>
                <button type="reset" class="btn btn-warning" id="btn-reset">Resetear</button>
                <a class="btn btn-danger" href="@Url.Action("index", "Home")">Cancelar</a>
            </div>

        </div>
    }

Aca la función checkAdminData()

function checkAdminData() {

            if (validarCamposInput()) {
   
                if (!validateEmail()) {

                    alert("El Email es invalido!");
                    $("#txtEmail").addClass('bordeRojoValidacion');
                    return;
                }

                else if (!EqualPasswords()) {

                    alert("Las contraseñas deben ser iguales!");
                    return;
                }

                else {
                    
                    document.formAdmin.submit();//hace submit y manda los datos del form
                }

            }
            else {

                alert("Hay campos vacios!");
                return;
            }
           
        }

Aca las funciones validarCamposInput() validateEmail() y EqualPasswords()

function validateEmail() {

            if (!/^\w+([\.-]?\w+)*@@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(formAdmin.txtEmail.value)) {            
                return false;
            }
            else
                return true;
        }

        function EqualPasswords() {

            var clave1 = document.formAdmin.txtClave1.value
            var clave2 = document.formAdmin.txtClave2.value

            if (clave1 != clave2) {

                addClassToClaves()
                return false;
            }
            else
                return true;

        }

        function validarCamposInput() {

            var inputVacio = false;
            $(".form-group > input").each(function () {
                if (this.value == "") {

                    $("#" + this.id).addClass('bordeRojoValidacion');
                    inputVacio = true;
                    //importante! la clase bordeRojoValidacion esta declarada en _UsserLayout
                }
            });

            if (inputVacio == true)
                return false;
            else
                return true;
        }

7
  • Cabe la posibilidad de que tu expresión regular para validar correo tenga algún detalle. Saludos Commented el 13 jul. 2020 a las 17:16
  • Gracias @Mauricio Contreras por responder. No creo que sea lo que dices porque acabo de quitar la función validateEmail, sin embargo cuando escribo mal las dos contraseñas, la función EqualPasswords() me avisa, pero de todas formas envía los datos del formulario
    – Claudio
    Commented el 13 jul. 2020 a las 17:31
  • Intenta return false; o event.preventDefault(); en lugar de solo return; para evitar que se procese el formulario.
    – Triby
    Commented el 13 jul. 2020 a las 19:05
  • @Triby, tampoco esta funcionando, coloque abajo de todo en mi función checkAdminData() lo siguiente:
    – Claudio
    Commented el 13 jul. 2020 a las 20:13
  • document.getElementById("btn-guardar").addEventListener("click", function (event) { event.preventDefault() });
    – Claudio
    Commented el 13 jul. 2020 a las 20:13

1 respuesta 1

1

Solucionado! en ves de llamar a la función checkAdminData() desde el botón guardar, la llamo desde el formulario:

@using (Html.BeginForm("RegistrarAdmin", "Home", FormMethod.Post, new { name = "formAdmin", onsubmit = "return checkAdminData();" }))

De esta manera evito que se haga el submit al detectar errores en el formulario.

Aca los cambios en el formulario

@using (Html.BeginForm("RegistrarAdmin", "Home", FormMethod.Post, new { name = "formAdmin", onsubmit = "return checkAdminData();" }))
    {
        @Html.AntiForgeryToken()

        <div id="cont-formulario-admin">

            <div class="form-group">
                <label for="lblEmail">Email:</label>
                <input type="email" class="form-control" id="txtEmail" name="txtEmail" onblur="removeClass(this);" maxlength="45" placeholder="Email" required>
            </div>

            <div class="form-group">
                <label for="lblName">Nombre:</label>
                <input type="text" class="form-control a" id="txtName" name="txtName" maxlength="45" onblur="removeClass(this)"; placeholder="Nombre" required>
            </div>

            <div class="form-group">
                <label for="lblApe">Apellido:</label>
                <input type="text" class="form-control" id="txtSurname" name="txtSurname" maxlength="45" onblur="removeClass(this)"; placeholder="Apellido" required>
            </div>

            <div class="form-group">
                <label for="lblPwd">Contraseña:</label>
                <input type="password" class="form-control" name="txtClave1" id="clave1" maxlength="45" onblur="removeClass(this)"; placeholder="Contraseña" required>
            </div>

            <div class="form-group">
                <label for="lblPwd">Repita la contraseña:</label>
                <input type="password" class="form-control" name="txtClave2" id="clave2" maxlength="45" onblur="removeClass(this)"; placeholder="Repetir contraseña" required>
            </div>

            <div id="button-group">
                <button class="btn btn-primary" type="submit" id="btn-guardar">Guardar</button>               
                <button type="reset" class="btn btn-warning" id="btn-reset">Resetear</button>
                <a class="btn btn-danger" href="@Url.Action("index", "Home")">Cancelar</a>
            </div>

        </div>
    }

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.