jQuery - Message Not Disappearing Upon Text Entry

[mattyd]

Hello.

I am working on a form with multiple text-entry boxes and I am using jQuery to give messages to the User for each field.

So far every field works correctly except for the last field, "Company": When a User enters any text the message should disappear, behaving like the other fields do but it does not.

Snippet of script being used, below:

`

<!--Rules & Messages-->

<script src='jquery.validate.min.js'></script>    
        <script>
            $("#DemoForm").validate({
                rules: {
                    'username': {
                        required: true
                        },
                    'email': {
                        required: true,
                        email: true,
                        },
                    'password': {
                        required: true,
                        minlength: 6,
                        maxlength: 10,
                        },
                    'cfmPassword': {
                        equalTo: "#password",
                        minlength: 6,
                        maxlength: 10,
                        },
                     'city': {
                        required: true
                        }, 
                     'zip': {
                        required: true
                        },
                     'company': {
                        required: true
                        },  
                    },

                messages: {
                    'username': {
                        required:'Please enter a username.'
                        },
                    'email': {
                        required:'Please enter your email.',
                        email:'Please enter a valid email.'
                        },
                    'password': {
                        required:"A password is required."
                        },
                    'city': {
                        required:"Please enter your city."
                        },
                    'zip': {
                        required:"Please enter your zip code."
                        },   
                    'company': {
                        required:"Please enter the company you work/worked for."
                        }   
                    }
            });
</script>

Thank you in advance!

[Aeonix]

Just a sugesstion, couldn't you just select your <input>'s by Id, and then say that if it's empty, produce a message?

For example, HTML being:

<input id="byName" value="" name="name" placeholder="Name" />

And JavaScript being:

$("#inputName").focusout(function() {
    usernameForm = document.getElementById("inputName").value;
    if (usernameForm == "")
        alert("C'mon man! Everybody has a name, doe!");
});

Could you try this one maybe? I'm not genius with jQuery. Just tested on jFiddle, works like dream.

It would do actually nothing, except when you quit the form of the ID, then it'll run trigger, which will select the form by it's ID (inputName) and get readable characters out of it, then it will look if the usernameForm is "empty" (I wonder why null didn't work), if it's true, you get misappropriated message.

I can help you on with building further on this, but I can't really continue with your script (while looking at script you provided, it's not my style and I won't write/think optimally).

If that would go, you just could replace alert() with variable containing message, for example "You forgot to input your name." and trigger it at the end and displaying only last message. And then playing around with usernameForm.length(). If you're ready to go on my solution, I'm ready to convert your code into this type of setting, just say "Yes".