开发者

jQuery Validation not highlighting all fields

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


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!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜