javascript - How do I fix two bugs for my jQuery form Validation code? -

my code adds class error if field invalid , if field valid, error class removed , form submitted normally.

i having trouble figuring out 2 small bugs form validation code created.

bugs listed below:

1) if enter correct content within 1 field, , click submit, length of error class not update on first submit click. takes 2 submit clicks length update. (view console.log)

2) if change content of input field , click submit (all works well, error class removed) if decide delete updated text & leave field blank, error class not re-applied.

would great if can assistance solving this.

please let me know if unclear.

thanks in advance: jsfiddle

$('form.requiredfields').submit(function(e) {      var req = $(this).find('.req'),         validateemail = function(email) {             var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/;             return re.test(email);         };      req.each(function() {         var $this = $(this),             defaultval = $this.prop('defaultvalue'); //cache default val          //checks validation errors        if (  ( $this.hasclass('email') && !validateemail( $this.val() ) ) ||              ( defaultval === $this.val() || $this.val() === '' || $this.val().length < 3 )        )         {           $this.addclass('error');        } else {           $this.removeclass('error req');        }      });      console.log(req.length);      if ( req.length === 0 ) {         return true;     } else {         return false;     }  });  

like dc5 said #2 don't remove req class.

and #1 - you're looking errors (.req) before removed.

see working fiddle. example how code work maybe can find cleaner solution.

$('form.requiredfields').submit(function(e) {      var req = $(this).find('.req'), errorcheck = 0,         validateemail = function(email) {             var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/;             return re.test(email);         };      req.each(function() {         var $this = $(this),             defaultval = $this.prop('defaultvalue'); //cache default val          //checks validation errors        if (  ( $this.hasclass('email') && !validateemail( $this.val() ) ) ||              ( defaultval === $this.val() || $this.val() === '' || $this.val().length < 3 )        )         {           $this.addclass('error');        } else {           $this.removeclass('error');        }      });      errorcheck = $(this).find('.error');     console.log(errorcheck.length);      if ( errorcheck.length === 0 ) {         return true;     } else {         return false;     }  });