form validation with valid and invalid notification and symbol - html

Question

I have the following set of code where I'm trying to make it work in such a way that by default it will have no pop-over notification and no X symbol. It should appear if the input is invalid stating the format of input (red box) and the Red-X. The rest is fine that as soon as someone make some input, it gives a green-tick symbol but in that case I don't want the pop-over notification at all.
Fiddle Demo
HTML:
<form action="#" method="GET" id="subscribe" name="subscribe">
<div class="NameForm">
<input class="inputName" type="text" placeholder="Your Name" name="query" aria-describedby="name-format" required >
<span id="name-format" class="helpName">Format: firstname lastname</span>
</input>
</div>
</form>
CSS:
.inputName {
border: 2px solid #306b88;
color: #383838;
font: 14px/14px 'focobold';
height: 40px;
margin: 2px 0;
padding: 0 16px;
text-transform: uppercase;
width:248px;
}
.helpName {
display:none;
font-size:90%;
}
input:focus + .helpName {
display:inline-block;
background-color:#26ae56;
height:38px;
width:240px;
position:absolute;
color:#fff;
left:30px;
top:70px;
text-align:center;
line-height:40px;
}
input:required:invalid, input:focus:invalid {
background-image: url(http://s27.postimg.org/ttonbaj5b/invalid.png);
background-position: 260px center;
background-repeat: no-repeat;
}
input:required:valid {
background-image: url(http://s14.postimg.org/gaechg2e5/valid.png);
background-position: 254px center;
background-repeat: no-repeat;
}
More or less, this is the Required Format:

Answer 1

I'm glad I was able to solve the quest...
Here's the Fiddle if you would like to know more about the solution.
It required
function validate_all_forms(){
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value != param;
}, "Please specify a different (non-default) value");
$( "#registration-form" ).validate({
rules: {
myname: {
required: true,
minlength: 3
},
email: {
required: true,
minlength: 6,
email: true
},
},
focusInvalid: false,
onkeyup: false,
submitHandler: function(form) {
$(form).ajaxSubmit({
target: '.optional'
});
},
messages: {
myname: {
required: "Enter Your name",
minlength: jQuery.format("atleast 2 char"),
notEqual: "except the default value please!"
},
email:{
required: "Enter Your E-MAIL",
minlength: jQuery.format("atleast 6 char"),
email: "incorrect e-mail id"
}
}
});
$( "#contact-form" ).validate({
rules: {
your_name: {
required: true,
minlength: 2
},
},
onkeyup: false,
focusInvalid: false,
submitHandler: function(form) {
$(form).ajaxSubmit();
},
});
}