1

Tengo una función en JavaScript que chekea si hay inputs vacíos onkeyup. Si los hay me avisa con un alert, 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 está 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 Guardar, me envía esos datos vacíos. Yo quiero que al pulsar el botón Guardar cumpla con la funciones de JavaScript.

Código completo:

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 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>

1
  • te falta el event.preventDefault() Commented el 13 feb. 2020 a las 18:01

1 respuesta 1

0

Solo necesitas 2 cosas:

  1. Hacer que validarCamposInput() devuelva verdadero o falso.
  2. Ejecutar y verificar el resultado de validarCamposInput() antes de enviar el formulario.

function comprobarClave() {
  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 if(validarCamposInput()) // Solo se enviará si los campos están bien
    document.f1.submit()//pulsa el submit y manda los datos del form

  //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 == "") {
    // No hay mensaje de error, quiere decir que los campos están correctos
    // Devolver verdadero
    return true;
  }
  alert(mensajeCabecera + mensajeValidacion);
  // Hay error en los campos
  // Devolver falso
  return false;
}

function validarInput(caracter) {
  if (caracter != "") {
    $("#" + caracter.id).removeClass('bordeRojoValidacion');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form 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>

5
  • Gracias Triby,pero al pulsar el botón Guardar con todos los datos completos, me sale un error diciendo que: column 'Nombre' cannot be null...eso pasa porque el boton guardar no esta funcionando como Submit ? y por lo tanto me envía los datos vacios?
    – Claudio
    Commented el 13 feb. 2020 a las 18:09
  • No, eso no tiene que ver, el botón no necesariamente debe ser submit, porque la función es la que dispara el método submit del formulario que, a final de cuentas, es exactamente lo mismo. Entonces, al parecer tu problema ya no es en esta instancia, sino en el servidor, ¿es correcto?
    – Triby
    Commented el 13 feb. 2020 a las 18:13
  • Evidentemente si!, tenes alguna idea que puede ser?, ya que me dice que la column 'Nombre' cannot be null
    – Claudio
    Commented el 13 feb. 2020 a las 18:19
  • Lo recomendable es que hagas una nueva pregunta y coloques el código importante: formulario y lo que sea que estés usando del lado del servidor para procesarlo. Si esta respuesta te sirvió, por favor márcala como aceptada. Gracias.
    – Triby
    Commented el 13 feb. 2020 a las 18:22
  • 1
    Aparentemente no me había actualizado los cambios así que cerré la ventana del navegador y volví a Iniciar el proyecto y ya no me tira ese error de la columna vacía
    – Claudio
    Commented el 13 feb. 2020 a las 19:31

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.