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;
}
return false;
oevent.preventDefault();
en lugar de soloreturn;
para evitar que se procese el formulario.