CODEWITHSUNDEEP
jqueryjquery-validate
Matt Altepeter
Matt Altepeter

Reputation: 329

Very confused on jQuery validate issue

I'm using query validate to verify that a user has filled out all text fields before sending me an email. Here is my form HTML:

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
            <input type="text" class="required" placeholder="Your Name" /> <br />
            <input type="text" class="required" placeholder="Your Email" /> <br />
            <input type="text" class="required" placeholder="Subject" /><br />
            <textarea rows="10" class="required" ></textarea><br />
            <input type="submit" class="btn btn-primary required" />
</form>

And my jQuery:

$(function() {
    $('#emailForm').validate();
});

I then visit the page and submit the form without inputing any text and only the first text box gets the error message attached to it. If the first text box is filled out, the form gets submitted without any issues. Can someone help me out? Thanks

Upvotes: 0

Views: 64

Answers (2)

Tom
Tom

Reputation: 2634

Remove the first class=required, see what happens? The form will validate on email now. The way to do this is to give a unique name in the html. I prefer this way as it gives more flexibility to further customize:

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
    <input type="text" name="name" placeholder="Your Name" /> <br />
    <input type="text" name="email" placeholder="Your Email" /> <br />
    <input type="text" name="subject" placeholder="Subject" /><br />
    <textarea rows="10" class="required small" ></textarea><br />
    <input type="submit" class="btn btn-primary" />
</form>

$(function() {

    $('#emailForm').validate({
           rules: {
                   name: "required",
                   email: "required",
                   subject: "required",
           }
   });

});

Using this you can get all kinds of fancy using messages, and other fields. See this good tutorial.

Fiddle I was playing around with.

Upvotes: 1

Sparky
Sparky

Reputation: 98748

Each input must contain a name attribute or the jQuery Validate plugin will not function properly.

Otherwise, there is nothing wrong with using class="required" within each element.

Try this instead:

HTML:

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
    <input type="text" name="yourname" class="required" placeholder="Your Name" /> <br />
    <input type="text" name="youremail" class="required" placeholder="Your Email" /> <br />
    <input type="text" name="subject" class="required" placeholder="Subject" /><br />
    <textarea rows="10" name="description" class="required" ></textarea><br />
    <input type="submit" class="btn btn-primary required" />
</form>

jQuery:

$(function() {
    $('#emailForm').validate();
});

Working DEMO: http://jsfiddle.net/xSwfD/

Upvotes: 3

Related Questions