3

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;
}

1 Answer 1

3

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!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.