Jquery - form validation, add css styles to the error messages

Question

I am trying to add css styles to the error messages that show up using Jquery validation. these are under the messages. I'm new to Jquery I have tried adding css class to the error message with no effect.

HTML Form

<form method="post" action="mail.php" id="contact-form">
                   <div class="form-group">
                    <label for="name">Name</label>
                    <input type="Text" class="form-control" name="name" id="name" placeholder="Enter Name">
                  </div>
                  <div class="form-group">
                    <label for="subject">Subject</label>
                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Enter Subject">
                  </div>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email">
                  </div>
                  <div class="form-group">
                    <label for="comment">Message</label>
                    <input type="text" class="form-control" name="comment" id="comment" placeholder="Enter Message">
                  </div> 

                  <button type="submit" value="submit"  name="submit" class="btn btn-default">Submit</button>
                </form>

Jquery

    <script type="text/javascript">
                 $('#contact-form').submit(function () {
                 $('#loadingimage').show();
                 $('#loadingtext').show();
                });
    </script>

    <script type="text/javascript">
        (function($,W,D)
        {
            var JQUERY4U = {};

            JQUERY4U.UTIL =
            {
                setupFormValidation: function()
                {
                    //form validation rules
                    $("#contact-form").validate({
                        rules: {
                            name: "required",
                            subject: "required",
                            email: {
                                required: true,
                                email: true
                            },
                            comment: "required"
                        },
                        messages: {
                            name: "Please enter your Name",
                            subject: "Please enter a Subject",
                            email: "Please enter a valid Email Address",
                            comment: "Please enter your Message",

                        },
                        submitHandler: function(form) {
                            form.submit();
                        }
                    });
                }
            }

            //when the dom has loaded setup form validation rules
            $(D).ready(function($) {
                JQUERY4U.UTIL.setupFormValidation();
            });

        })(jQuery, window, document);
        </script>

This jQuery4U code is nothing but overly complicated nonsense; everything can be simplified greatly. It serves no useful purpose other than to cause more confusion to new users. Please review the Tag Wiki Page to see how your code can be simplified tremendously — Sparky
– Sparky, Commented Feb 10, 2015 at 20:21

Richa · Accepted Answer · 2015-02-10 11:24:17Z

try adding errorClass:'error',

$("#contact-form").validate({
                            rules: {
                                name: "required",
                                subject: "required",
                                errorClass:'error',
                                email: {
                                    required: true,
                                    email: true
                                },
                                comment: "required"
                            },
                            messages: {
                                name: "Please enter your Name",
                                subject: "Please enter a Subject",
                                email: "Please enter a valid Email Address",
                                comment: "Please enter your Message",

                            },
                            submitHandler: function(form) {
                                form.submit();
                            }
                        });

Collectives™ on Stack Overflow

Jquery - form validation, add css styles to the error messages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related