JQuery - Validate() and grouping similar form items

Question

I have the following form:

http://fuzzysiberians.com/app4.cfm

when there is no social security number, my error message is being displayed after each text field. Is there a way to group these error messages so that there will be 3 text boxes next to each other and then display only one error message?

Answer 1

Why not have SSN as a single field? Currently you have 3 separate text fields for each part of the ssn.

Or, there are various Masked-edit fields that will auto add the dashes into the field for the user. But this is a case where the user would be accustomed to entering their entire number as apposed to entering it in parts.

Answer 2

Rather than have 3 different fields for the Social Security Number, I'd using a single field that is masked for the ###-##-#### format.

You could then have the single validation rule hit the single input box.

jQuery Masked Input Plugin

   $("#ssn").mask("999-99-9999");

Here is a code sample using a single field for SSN along with the validate plugin and the masked input plugin...

<form id="myForm">
<fieldset>
    <legend>My Sample Form</legend>
    <label><strong>Name:</strong></label><br />
    <input name="name" id="name" />
    <br />
    <label><strong>SSN:</strong></label><br />
    <input name="ssn" id="ssn" />
    <br />
    <input class="submit" type="submit" value="submit" />
</fieldset>
</form>

<script language="javascript">
    jQuery(function($) {
        $("#ssn").mask("999-99-9999");
        // validate signup form on keyup and submit
        $("#myForm").validate({
            rules: {
                name: "required",
                ssn: "required",
            },
            messages: {
                name: "Please enter your name!",
                ssn: "Please enter your ssn!"
            }
        });

    });
</script>