jQuery Validation doesn't validate

Question

I'm having a problem with my jQuery Validation script.

You can find the code on http://jsfiddle.net/R3wrn/1/

jQuery:

$(document).ready(function () {
    $("#frmContact").validate({
        rules: {
            contact_name: "required",
            contact_firstname: "required",
            contact_email: {
                required: true,
                email: true
            },
            contact_company: "required",
            contact_VAT: "required",
            contact_Address: "required",
            contact_ZIP: "required",
            contact_city: "required",
            contact_country: "required"
        }
    });
});

HTML:

<form id="frmContact" action="#" method="post" class="f2m contactForm">
    <div class="inputgroup">
        <label for="contact_name">Name</label>
        <input type="text" id="contact_name" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_firstname">First name</label>
        <input type="text" id="contact_firstname" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_email">Email</label>
        <input type="text" id="contact_email" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_name">Company</label>
        <input type="text" id="contact_company" value="" class="required" />
    </div>
    <div class="inputgroup">
        <label for="contact_VAT">VAT number</label>
        <input type="text" id="contact_VAT" value="" class="required" />
    </div>
    <div class="inputgroup">
        <label for="contact_Address">Address</label>
        <input type="text" id="contact_Address" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_ZIP">Postal code</label>
        <input type="text" id="contact_ZIP" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_city">City</label>
        <input type="text" id="contact_city" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_country">Country</label>
        <select id="contact_country">
            <option value="">---</option>
            <option value="8b902045-d885-4777-86fb-e44788d842e3">Belgi&#235;</option>
            <option value="1a839cad-d0a0-449e-b376-96f120e78c9e">Duitsland</option>
            <option value="bcabef32-78eb-4489-a90a-cfa42e525053">France</option>
            <option value="788806bb-c3ec-4a42-a651-64e676065b7d">Griekenland</option>
            <option value="542063ac-025b-44c5-8324-f36bde1c7989">Groot-Brittanni&#235;</option>
            <option value="c5159342-0cbb-4f9d-b449-71d16e0953e0">Itali&#235;</option>
            <option value="65c9621d-4f6a-45d4-9d8c-25d6e27432d3">Luxemburg</option>
            <option value="14874203-02c2-4999-a0a5-aabcacf21530">Nederland</option>
            <option value="135523df-5161-4c90-865c-cbf280569631">Noorwegen</option>
            <option value="e0954d61-d0f3-498a-850f-33a54be040d5">Portugal</option>
            <option value="ab0a9f35-206e-419b-9fb9-b8bbd51066cb">Spanje</option>
            <option value="19766c79-51be-4094-95e5-6a981a452491">Zweden</option>
        </select>
    </div>
    <div class="inputgroup">
        <label for="contact_mobile">Mobile</label>
        <input type="text" id="contact_mobile" value="" />
    </div>
    <div class="inputgroup">
        <label for="contact_comments">Comments</label>
        <textarea id="contact_comments" rows="10" cols="10"></textarea>
    </div>
    <div class="buttondiv">
        <br />
        <input type="submit" id="btnSendContact" class="button" value="Send your request" />
    </div>
</form>

Why is it only validating the companyname?

I have more or less the same code in a ASP.NET MVC application, but there it won't validate anything.

Sparky · Accepted Answer · 2014-09-03 19:09:18Z

3

jQuery Validate plugin uses the name attribute, not the id. Try changing your inputs' id attribute to name.

edited Sep 3, 2014 at 19:09

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Oct 15, 2012 at 8:53

nix

3,3022 gold badges24 silver badges37 bronze badges

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

2 Comments

CyclingFreak Over a year ago

Works! Side question: how can I prevent that the "This field is required." string shows up?

nix Over a year ago

You can set messages option like this : messages: {contact_name: "", contact_firstname: "",..}. but i guess there are better ways to do it..

Afsal · Accepted Answer · 2012-10-15 09:07:40Z

2

Here is the answer

http://jsfiddle.net/2nknH/

answered Oct 15, 2012 at 9:07

Afsal

3493 silver badges10 bronze badges

Comments

Simon Wang · Accepted Answer · 2012-10-15 09:04:27Z

0

you did not add the css class required on those input, check this updated version: http://jsfiddle.net/R3wrn/2/

EDIT:

For rules, seems like what @cloud nix says, add name to those input can solve it: http://jsfiddle.net/R3wrn/7/

edited Oct 15, 2012 at 9:04

answered Oct 15, 2012 at 8:51

Simon Wang

3,0131 gold badge19 silver badges37 bronze badges

1 Comment

CyclingFreak Over a year ago

Hmmm... I removed those because I did have added the rules in code. Isn't that double work?

Collectives™ on Stack Overflow

jQuery Validation doesn't validate

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related