Working Form Validation with Jquery -

I try to roll my own form validation using a visible checkmark or next to the form field with X I am doing One problem was whether I was at fault or not, after generating this keyboard, it would generate a new span. So I tried to remove all the elements after each key so that I could find a period with success or error message. It currently works, but I was thinking that there is a better way to do this:

  jQuery ('input # firstname'). Keyup (function () {var text = jQuery (this) .val (); if (check_text) === incorrect || text === '') {$ (this) .nextAll (). ); JQuery (this). After ('& lt; span class = "form-error"> error ;);} and {$ (this) .nextAll (). ); JQuery (this) .after ('& lt; span class = "form-success" & gt; success & lt; / span & gt;';)}}); / * Function * / function check_text (text) {var regex = / ^ [a-zA-Z0-9-] * $ /; Return regex.test (text); }   
 Task example:   
 
 
 I suggest you to add I give each  input   
   & Lt; Span class = 'msg' & gt; & Lt; / Span & gt; & Lt; Br> & Lt; Input ID = "Last name" /> gt; & Lt; Span class = 'msg' & gt; & Lt; / Span & gt;   
 And in this way your script set message:  
  if (check_text (text) === false || text === '') { JQuery (this) .next (".mssg") Html ('& lt; span class = "form-error"> Error ;); } Other {jQuery (this) .next (".mssg"). Html ('& lt; span class = "form-success" & gt; success & lt; / span & gt;'); }