Question

I am having an issue with jquery validation. I am using it on a number of different forms throughout my site. With all of the forms – the behaivour works as advertised, however, on one of them, when i click submit – only the first field is showing the message “this field is required” instead of all of them showing it. Only after clicking submit and seeing the first validation message, followed by some random clicking throughout some of the other fields can I get the remaining validation messages to appear. As I understand it this is not the default behaivour. If 3 fields are required and none are filled in – the submit action should highlight all 3 fields with the same message right?

here is the js:

$(document).ready(function() {
    $("#form").validate({ errorElement: "div" });
});

function sendComments() {
    if ($("#form").valid()) {
        // something
    }
}

here is the markup:

<form id="form" runat="server">    
    <div id="divContact">    
        <table cellpadding="5" cellspacing="5">
        <tr>
            <td>        
                <a class="title">Name:</a>
                <input type="text" id="txtName" class="required" runat="server" />
            </td>
        </tr>
        <tr>
            <td>  
                <a class="title">Email:</a>
                <input type="text" id="txtEmail" class="required email" runat="server" />
            </td>
        </tr>
        <tr>
            <td>  
                <a class="title">Comments:</a>
                <textarea id="txtComments" cols="40" rows="6" class="required"></textarea>
            </td>
        </tr>
        <tr>
            <td>   
                <br />
                <a id="btnSend" class="roundButton" onclick="return sendComments()">Send</a>
            </td>
        </tr>
        </table>
    </div>    
</form>

here is the style sheet:

#divContact
{
    margin-top: 50px;
    text-align:center;
}

#divContact a.title
{
    display:block;
    color:White;
    font-family:Verdana;
    font-size:0.8em;
}

#txtComments, #txtEmail
{
    width:100%;
}

#divContact table
{
    text-align:left;
    padding: 20px;
    background-color:#3F0F54;
    width:350px;
    margin: 10px auto 0 auto;    
    border: 3px double grey;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

div.error
{
    display:block;
    color:Red;
    font-size: 0.7em;
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}

Answer 1

I have figured it out – in the markup i forgot to give each input field a name attribute. Adding this to each element has made the validation work properly!