jquery validation has-error class setting

Question

I am using jquery validation plug-in for validating the form inputs. I am able to validate the input and error message is shown properly. But the issue is , the element is not highlighted with red color. I have analysed and found the issue is with has-error class.

The error class is only set when I am putting the form-controls inside a div with class form-group. Otherwise has-error class is not at all set . Please advice on this.

Thanks.

JS and HTML :

<html>
<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.validate.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <link href="bootstrap.min.css" rel="stylesheet">

  <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            firstname: "required",
            lastname: "required",
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },

        // Specify the validation error messages
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        },
        highlight: function (element, errorClass) {
                $(element).closest('.form-control').addClass('has-error');
                //$(element).addClass('has-error');
            },
            unhighlight: function (element, errorClass) {
                $(element).closest(".form-control").removeClass("has-error");
            },
        submitHandler: function(form) {
            cosole.log("valid >>"+form.isValid());
            form.submit();
        },

    });

  });


  </script>

</head>
<body>
  <h1>Register here</h1>

  <!--  The form that will be parsed by jQuery before submit  -->
  <div>
  <form action="" method="post" id="register-form" novalidate="novalidate">

    <label>First Name</label><input class="form-control" type="text" id="firstname" name="firstname" /><br />
    <label>Last Name</label><input class="form-control" type="text" id="lastname" name="lastname" /><br />
    <label>Email</label><input class="form-control" type="text" id="email" name="email" /><br />
    <label>Password</label><input class="form-control" type="password" id="password" name="password" /><br />
    <div style="margin-left:140px;"> <button type="submit" name="customName" id="UpdateButton" value="MySubmit" class="btn btn-sm btn-bitbucket"> <i id="setHubTypeTag" class="demo-icon icon-cw-1 fa-fw" style="font-size:1.3em;"> </i> &nbsp;Update</button></div>

  </form>
  <div>
  <script>
  $(document).ready(function () {
    $('#UpdateButton').click(function () {
        console.log("test");
    });
  });
  </script>
</body>
</html>

Ben Roberts · Accepted Answer · 2016-10-08 19:00:38Z

12

You need to override some defaults in the plugin:

$.validator.setDefaults({
    highlight: function(element) {

        $(element).closest('.form-group').addClass('has-error');

    },
    unhighlight: function(element) {

        $(element).closest('.form-group').removeClass('has-error');

    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

answered Oct 8, 2016 at 19:00

Ben Roberts

762 silver badges12 bronze badges

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

Comments

Sparky · Accepted Answer · 2016-03-21 17:14:26Z

2

The error class is only set when I am putting the form-controls inside a div with class form-group. Otherwise has-error class is not at all set.

Nothing is happening because your DOM traversal strategy seems to be incorrect (based on the markup shown in the OP).

$(element).closest('.form-control').addClass('has-error');

The element represents the input element being validated. The closest method is looking for the "closest" element with the form-control class. However, in your markup... the element itself contains the form-control class, therefore nothing is being targeted at all.

Try this...

$(element).addClass('has-error');

which will add the has-error class to the element itself.

Since the plugin automatically adds and removes the error class from the element being validated, it does not seem like you even need the highlight and unhighlight over-rides. Simply change the default error class to has-error instead of trying to use highlight and unhighlight.

$("#register-form").validate({
    errorClass: "has-error",
    ....

answered Mar 21, 2016 at 17:14

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

2 Comments

JavaUser Over a year ago

Thanks Sparky . I tried setting error class to "has-error" , it is not working.Also I tried setting the error class to the element itself.Still it is not working . Can you please share a jfiddle?

Sparky Over a year ago

@JavaUser, please post a jsFiddle that fully reproduces your issue, then I'll make the necessary corrections to it.

Collectives™ on Stack Overflow

jquery validation has-error class setting

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related