html - Printing text next to a form field in JavaScript -

i'm having bit of trouble assigment , help. meant create product registration form page regular expressions , , display correct error when regexes don't match.

i trying print tick or ok next form field can't right function. form right looks this: http://www.imageurlhost.com/images/98zrdmrmsvbxnwowrvsf.png

the "please enter product ...." activated jquery slideup , slidedown function onblur on text field.

so want display ok red circle after click away it, , if change doesn't match ok disappears , alert shows up. code far:

my html form:

<div> <input type="text" class="name" placeholder="name" name="name" onblur="return validateproductname()"> <p class ="p11" id="p1"></p>   <p class="name-help">please enter product name between 1-50 characters.</p> </div> 

my css:

.p11 { float: right;} 

my jquery:

$(".name").focus(function(){   $(".name-help").slidedown(500); }).blur(function(){   $(".name-help").slideup(500); }); 

and javascript:

    // function validate product name function validateproductname() {      // if statement product name     if (document.myform.name.value.trim().search(pname) == -1) {          alert("invalid product name. please note: product name should have 1-50 characters.");       } else {          document.getelementbyid("p1").innerhtml = "ok";     }  } 

so, prints ok in between field on right side, want right next field showed in picture , can't work! want disappear if go form , put wrong...

thanks guys!

i assume, have no problem jquery itself, have problem of showing next input box. so,

create <span id='tick'> tag after input field

and once passes validation, use jquery show tick

$('#tick').html('whatever want'); 

edit: dont have include float:left on span

check out fiddle link

edit:

in validation function, show , hide according validation results

     // function validate product name     function validateproductname() {          // if statement product name         if (document.myform.name.value.trim().search(pname) == -1) {            document.getelementbyid("tick").style.display = 'none'; // hide ok text if enterd wrong input             } else {              document.getelementbyid("tick").innerhtml = "ok"; //note: showing ok text   document.getelementbyid("tick").style.display= "block";         }      }