1

var userRegister = document.getElementById('userRegister');

userRegister.addEventListener('submit',  function(e) {
	e.preventDefault();

	$('.invalid-feedback').remove();

	var name = $("#nameRegister").val(),
		email = $("#emailRegister").val(),
		password = $("#passwordRegister").val()

		 if (name == "" || email == "" || password == ""){
	 		$("#nameRegister").parent().after('<div class="invalid-feedback d-block">Please enter name.</div>')
	 		$("#emailRegister").parent().after('<div class="invalid-feedback d-block">Please enter email.</div>')
	 		$("#passwordRegister").parent().after('<div class="invalid-feedback d-block">Please enter password.</div>')
		return false;	
	}	
})
<div class="modal fade" id="modalRegistrarse" role="dialog">
  <div class="modal-dialog" >
    <div class="modal-content">
    	<button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-body">
        <form method="post" class="needs-validation" id="userRegister" novalidate>
        	<h1 class="modalTitulo">Registrarse</h1>
        	<div class="iconoRedes">
        		<a href="#"><i class="fab fa-google rounded-circle google"></i></a>
        		<a href="#"><i class="fab fa-facebook-f rounded-circle facebook"></i></a>
        	</div>
			<div class="form-group">
				<div class="boxUserRegister">
					<label id="labelUserName">User Name</label>
          <div class="iconsAlerts">
            <i class="fa fa-check" id="okUsername"></i>
            <i class="fa fa-times" id="errorUsername"></i> 
          </div>
          <input type="text" class="form-control inputRegister" id="nameRegister" required autocomplete="off">   
				</div>
      			<div class="boxEmailRegister">
      				<label id="labelUserEmail">Email</label>
              <div class="iconsAlerts">
                <i class="fa fa-check" id="okUserEmail"></i>
                <i class="fa fa-times" id="errorUserEmail"></i> 
              </div>
      				<input type="email" class="form-control inputRegister" id="emailRegister" required autocomplete="off">
      			</div>
      			<div class="boxPasswordRegister">
      				<label id="labelUserPassword">Password</label>
              <div class="iconsAlerts">
                <i class="fa fa-check" id="okUserPassword"></i>
                <i class="fa fa-times" id="errorUserPassword"></i> 
              </div>
      				<input type="password" class="form-control inputRegister" id="passwordRegister" required autocomplete="off">
      			</div>  
    		</div>
			<div class="cajaOlvidoContrasena">
				<span class="olvidoContrasena">Ya Tiene Una Cuenta ?<a href="#" data-dismiss="modal" data-toggle="modal"><strong> Click Aqui</strong></a></span>
			</div>
			<div class="cajaBotonRegistrarse">
				<button type="submit" class="btn btn-primary botonRegistrarse">CREAR CUENTA</button>
			</div>
        </form>
      </div>
    </div>
  </div>
</div>

He estado probando con addEventListener y agregando el prevenDefault, para mis validaciones con javascript, pero cuando le doy click al boton "submit", no se cierra el modal. He visto en consola que si se envia los datos, solo que el modal no se cierra cuando le doy click en "submit", es un registrar usuario.

Si quito el prevenDefault, no valida los campos vacios y se envia, no entiendo porque.

1 respuesta 1

0

No se cierra por que no le indicas que se deba cerrar, luego de validar el formulario puedes indicarle que se cierre con:

$('#myModal').modal('hide')

Como lo indica la documentación de bootstrap https://getbootstrap.com/docs/4.3/components/modal/

En tu caso lo podrías colocar así:

  var userRegister = document.getElementById('userRegister');

userRegister.addEventListener('submit',  function(e) {
e.preventDefault();

$('.invalid-feedback').remove();

var name = $("#nameRegister").val(),
    email = $("#emailRegister").val(),
    password = $("#passwordRegister").val()

     if (name == "" || email == "" || password == ""){
        $("#nameRegister").parent().after('<div class="invalid-feedback d-block">Please enter name.</div>')
        $("#emailRegister").parent().after('<div class="invalid-feedback d-block">Please enter email.</div>')
        $("#passwordRegister").parent().after('<div class="invalid-feedback d-block">Please enter password.</div>')
    return false;   
}   
    $('#modalRegistrarse').modal('hide')
})

Por otra parte, si quitas el prevent default lo que sucede es que el evento sigue su ejecución normal que es enviar el formulario y aunque más abajo hagas esas validaciones ya el proceso de envío se ha iniciado. Con el preventdefault le indicas al evento en este caso submit del formulario que no termine su ejecución por default (enviar formulario).

1
  • ok muchas gracias
    – makoto
    Commented el 14 mar. 2019 a las 4:04

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.