Validation plugin is not validating all fields

Question

I am using the jQuery validate plugin for doing form validation. it's just checking first field only. if first field validation is true then it's submitting form. it's not validating rest fields..

i am using bootstrap 3.0

  <script type="text/javascript"> 
$(document).ready(function(){
    $('#contact').validate({
       rules: {
           firstname: {
               required: true,
               minlength: 5,
           },
           useremail: {
               required: true,
           }
       }
    });
})
</script>
   <form action="" method="" id="contact">
            <div class="form-group">
                <label> Your Name </label>
                <input type="text" class="form-control" placeholder="Enter Your Name" id="firstname" required="" minlength="5"/>
            </div>

            <div class="form-group">
                <label> Your E-mail </label>
                <input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" required=""/>
            </div>

            <div class="form-group">
                <label> Contact Detail </label>
                <input type="text" class="form-control" placeholder="Enter Contact Number" id="mobile" minlength="10" maxlength="10" required=""/>
            </div>
            <div class="form-group">
                <label> Type</label>
                <select class="form-control">
                <option> Inquiry </option>
                <option> Complaints </option>
                <option> Feedback </option>
                <option> Others </option>
            </select>
                </div>
            <div class="form-group">
                <label> Message</label>
                <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea>
            </div>
            <button type="submit" class="btn btn-primary btn-lg"> Send</button>
        </form>

I don't know what's going wrong with my code? Please help...

Thanks in advance

You've mispelled rules and relues in your CSS. – Eterm Oct 23 '13 at 12:40 — Eterm, Oct 23 '13 at 12:40
@Eterm i have changed it. but same issue... – 404 Not Found Oct 23 '13 at 12:42 — 404 Not Found, Oct 23 '13 at 12:42
Have you checked the console for errors? – Rory McCrossan Oct 23 '13 at 12:43 — Rory McCrossan, Oct 23 '13 at 12:43

Jacques Snyman · Accepted Answer · 2013-10-23T13:27:52.850

You have a typo in your validate options. relues must be rules.

Name attributes must also be specified:

HTML

<form action="" method="" id="contact">
    <div class="form-group">
        <label>Your Name</label>
        <input type="text" class="form-control" placeholder="Enter Your Name" name="firstname" required="" minlength="5" />
    </div>
    <div class="form-group">
        <label>Your E-mail</label>
        <input type="email" class="form-control" placeholder="Enter Your Email" name="useremail" required="" />
    </div>
    <div class="form-group">
        <label>Contact Detail</label>
        <input type="text" class="form-control" placeholder="Enter Contact Number" name="mobile" minlength="10" maxlength="10" required="" />
    </div>
    <div class="form-group">
        <label>Type</label>
        <select class="form-control">
            <option>Inquiry</option>
            <option>Complaints</option>
            <option>Feedback</option>
            <option>Others</option>
        </select>
    </div>
    <div class="form-group">
        <label>Message</label>
        <textarea class="form-control" rows="3" cols="5" placeholder="Enter Your Message Here..." id="message" minlength='10' required=""></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>

Javascript

$(document).ready(function () {
    $('#contact').validate({
        rules: {
            firstname: {
                required: true,
                minlength: 5,
            },
            useremail: {
                required: true,
            }
        },
        errorClass : 'has-error',
        validClass : 'has-success',
        highlight:function(element, errorClass, validClass) {
            $(element).parents('div').addClass(errorClass).children().removeClass(errorClass);
            $(element).parents('div').removeClass(validClass).children().removeClass(validClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('div').removeClass(errorClass).children().removeClass(errorClass);
            $(element).parents('div').addClass(validClass).children().removeClass(validClass);
        }
    });
})

Fiddle here

Error and valid stying can be done using this CSS:

.has-error
{
    background-color: rgb(255, 0, 0);
}
.has-success
{
    background-color: rgb(0, 255, 0);
}

thanks buddy.. one more question how to add class when error is there in field? and same way for success? — 404 Not Found, Oct 23 '13 at 12:58
Fiddle has been updated. jquery validation adds error and valid classes by default. — Jacques Snyman, Oct 23 '13 at 12:59
i am asking in .validate() method where should i add my css class. i am using bootstrap 3.0 so i want to add css class "has-error" and "has-success". — 404 Not Found, Oct 23 '13 at 13:03
i have just updated Fiddle take a look of it.. success it's working fine but what about error? — 404 Not Found, Oct 23 '13 at 13:07
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39831/discussion-between-jaq316-and-404-not-found) — Jacques Snyman, Oct 23 '13 at 13:11

score 3 · Answer 2 · answered Oct 23 '13 at 12:48

3

besides the spelling error. If you are using this plugin Jquery validation. You are missing the name attribute for the input.

<input type="email" class="form-control" placeholder="Enter Your Email" id="useremail" name="useremail"/>

According to the documentation, you have to assign each element that needs to be validated the 'name' attribute and specify the validation rule with i.e. name="firstname".

I suggest trying this even if you are not using the mentioned plugin.

answered Oct 23 '13 at 12:48

Mr.GT

310
4
12

1

Pleasure! Please remember to mark this as your answer. Thank you – Mr.GT Oct 23 '13 at 12:54
one more question how to add class when error is there in field? and same way for success? – 404 Not Found Oct 23 '13 at 12:54
`$('#useremail').addClass('error')` For Error and `$('#useremail').removeClass('error').addClass('valid')` for success – Mr.GT Oct 23 '13 at 12:59
that i know how to add and remove class but my question is where i should write it? ex. for success we have write it inside success : { }.. for error? – 404 Not Found Oct 23 '13 at 13:01
jquery validation should add it automatically if I'm not mistaken – Mr.GT Oct 23 '13 at 13:03

Validation plugin is not validating all fields

2 Answers2

Related