Tengo una función en javascriptJavaScript que chekeachekea si hay inputs vacios onkeyup, siinputs vacíos onkeyup
. Si los hay me avisa con un alertalert
, y también tengo una función que cuando pulsa el botón guardar, comprueba que dos campos ingresen la misma contraseña.
El problema estaestá en que si yo dejo todos los campos vacíos y solo completo los campos para poner las mismas contraseñas y pulso el botón GuardarGuardar
, me envía esos datos vacíos. Yo quiero que al pulsar el btn guardarbotón Guardar
cumpla con la funciones de javascriptJavaScript.
Aca el formularioCódigo completo:
@using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
{
<div class="form-group">
<label for="lblUserName">Nombre de usuario:</label>
<input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
</div>
<div class="form-group">
<label for="lblPwd">Contraseña:</label>
<input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
</div>
<div class="form-group">
<label for="lblPwd">Repita la contraseña:</label>
<input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
</div>
<div class="form-group">
<label for="lblDom">Domicilio:</label>
<input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
</div>
<button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
}
aca javascript
<script type="text/javascript">
function comprobarClave() {
validarCamposInput();
clave1 = document.f1.txtClave1.value
clave2 = document.f1.txtClave2.value
if (clave1 != clave2)
alert("Las dos contraseñas son distintas!.\nLas contraseñas deben ser iguales!")
else
document.f1.submit()//pulsa el submit y manda los datos del form
//validarCamposInput();
//Other Sentences
}
var mensajeCabecera = "Los siguientes campos están vacíos:\n";
var mensajeValidacion = "";
function validarCamposInput() {
mensajeValidacion = "";
$(".form-group > input").each(function () {
if (this.value == "") {
mensajeValidacion = mensajeValidacion + (this.id).replace("txt", "") + "\n";
$("#" + this.id).addClass('bordeRojoValidacion');
}
});
if (mensajeValidacion == "") {
return;
}
else {
alert(mensajeCabecera + mensajeValidacion);
}
}
function validarInput(caracter) {
if (caracter != "") {
$("#" + caracter.id).removeClass('bordeRojoValidacion');
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="f1">
@using (Html.BeginForm("RegistrarUsuario", "Usser", FormMethod.Post, new { name = "f1" }))
{
<div class="form-group">
<label for="lblUserName">Nombre de usuario:</label>
<input type="text" class="form-control" id="txtUsserName" name="txtUsserName" onkeyup="return validarInput(this);" placeholder="UserName" maxlength="45">
</div>
<div class="form-group">
<label for="lblPwd">Contraseña:</label>
<input type="password" class="form-control" name="txtClave1" onkeyup="return validarInput(this);" id="clave1" maxlength="45" placeholder="Clave1" required>
</div>
<div class="form-group">
<label for="lblPwd">Repita la contraseña:</label>
<input type="password" class="form-control" name="txtClave2" onkeyup="return validarInput(this);" id="clave2" maxlength="45" placeholder="Clave2" required>
</div>
<div class="form-group">
<label for="lblDom">Domicilio:</label>
<input type="text" class="form-control" id="txtAddress" name="txtAddress" onkeyup="return validarInput(this);" placeholder="Address" maxlength="45">
</div>
<button type="button" class="btn btn-default" onClick="comprobarClave()">Guardar</button>
}
</form>