form validation with valid and invalid notification and symbol

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();

    },
});

}