Error messages don't persist


#1


var main = function() {
  $('form').submit(function() {
    var firstName = $('#first').val();
    var lastName = $('#last').val();
    var email = $('#email').val();
    var password = $('#password').val();
    var myEmail = "my.email@emails.com"
    
    if(firstName === "") {
    		  $(".first-name-error").text("Please enter your first name.");
    }
    
    if(lastName === "") {
      		$(".last-name-error").text("Please enter your last name.");
    }
    
    if(email === "") {
      		$(".email-error").text("Please enter your email address.");
    } else if(email ===  myEmail) {
      		$(".email-error").text("This email is already taken.");
    }
    
    if(password === "") {
      		$(".password-error").text("Please enter a password.");
    } else if(password.length() < 8) {
      		$(".password-error").text("Short passwords are easy to guess. Try one with at least 8 characters.");
    }
  });
};

$(document).ready(main);

Whenever I submit the [blank] form, I see a brief flash of the correct error messages, but then they disappear as though the page is immediately refreshing.


#2

Hi @coresolver61180,

You need to stop the form from submitting. As the last thing inside your submit event listener on the form, add these two lines:

event.preventDefault();
return false;

Then make the function take a parameter of event so that jQuery can preventDefault() on it.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.