Form validation using jquery for bootstrap

Question

I wanted to learn form validation and tried spending a few hours and came up with the below code ... when I was going through a tutorial .,

Started with an expectation : If the field has valid values the field should be highlighted , and it should have a tick glyphicon else if the values of the filed is wrong it should highlight the textbox/field in red and throw up a validation error message.

But when I tried doing the same I came could only see the error message for form validation.

Please help me with this code .

Glyphicon and highlight to the textbox was not happening.

Link to my js fiddle code snippet

below is the JS code which I got it from the tutorial

Thanks :)

$(document).ready(function(){

$('#contact-form').validate({
  rules: {
    name: {
      minlength: 2,
      required: true
    },

  },
  highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    .text('OK!').addClass('valid')
    .closest('.control-group').removeClass('error').addClass('success');
  }
});

});

I had tried it already and the result was as expected but The license says it can not be used for business applications kind of stuffs hence I did not want to use it. As I am planning to publish my application after I build it . — ajay, Dec 03 '14 at 10:32
oops, i didn't know that.. did u find any other way? What about http://jqueryvalidation.org/ — arshad, Dec 03 '14 at 11:24
OP's code is [jQuery Validate plugin](http://jqueryvalidation.org/) as per his jsFiddle. — Sparky, Dec 03 '14 at 23:53
possible duplicate of [Bootstrap 3 with jQuery Validation Plugin](http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin) — Sparky, Dec 03 '14 at 23:54

score 0 · Accepted Answer · edited May 23 '17 at 12:13

Here is how you would integrate with BootStrap 3...

$('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        }
    },
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

DEMO: http://jsfiddle.net/s3jqggfn/2/

Reference: Bootstrap 3 with jQuery Validation Plugin

Form validation using jquery for bootstrap

1 Answers1