Question

I have some JavaScript form validation I’m using before I send it across to my PHP. (I’m still learning). but my question for you today is how I would get my error message to shake without reloading the page. My below JS code seems to reload the page when I click submit. The error message style is set to disply:none; by default and only shows when needed.

I hope you understand what I am getting at. ha ha Thank you in advance.

Here’s the js code.

function validateLoginForm() {
    var x = document.getElementById('email').value;
    if (x == null || x == "" || x == "Email") {
        document.getElementById('errorWrapper').style.display='block';
        document.getElementById('errorText').innerHTML='Please enter your Email address!';
        shakeIt();
        return false;
    }
}

and the jQuery.

$(document).ready(function() {
    function shakeIt(){
        $('#errorWrapper').effect("shake", { times:5, distance:8 }, 50);
    }
});

Answer 1

You need to do it on form.submit ie

$('#loginForm').submit(function(e){
var x= $('#email').val();
      if (x==null || x=="" || x=="Email")
      {
      $('#errorWrapper').show();
      $('#errorText').text('Please enter your Email address!');
      e.preventDefault();
      shakeIt();
      }
      return true;
});

Returning false will make the page not reload..