CODEWITHSUNDEEP
jquerytwitter-bootstrap-3jquery-validatebootstrap-modal
maverick
maverick

Reputation: 1484

jquery validate plugin with bootstrap modal

Has anyone tried jquery validate plugin with bootstrap modal form on click of a button. I am executing the below code on click of button but its not working. Any help will be greatly appreciated. My code can also be looked at https://jsfiddle.net/dharmjit/unr17s9u/2/

$('#addForm').validate({
      rules: {
        User_ID: {
          required: true,
          minlength: 2,
          maxlength: 10,
          messages: {
            required: "Required input",
            minlength: jQuery.validator
              .format("Please, at least {0} characters are necessary"),
            maxlength: jQuery.validator
              .format("Please, at least {0} characters are necessary")
          }
        },
        First_Name: {
          required: true,
          minlength: 2,
          maxlength: 10,
          messages: {
            required: "Required input",
            minlength: jQuery.validator
              .format("Please, at least {0} characters are necessary"),
            maxlength: jQuery.validator
              .format("Please, at least {0} characters are necessary")
          },
          highlight: function(element) {
            $(element)
              .closest('.form-group')
              .removeClass('success')
              .addClass('error');
          },
          success: function(element) {
            element.text('OK!').addClass(
                'valid').closest(
                '.form-group')
              .removeClass('error')
              .addClass('success');
          }
        });

Upvotes: 0

Views: 9065

Answers (1)

Sparky
Sparky

Reputation: 98718

Looking at your jsFiddle, it does not match the code in your OP:

OP:

  • jQuery: User_ID and First_Name
  • HTML: not shown

jsFiddle:

  • jQuery: firstname and lastname
  • HTML: username and password

  1. In the jsFiddle, your rules are declared on firstname and lastname, while your actual fields are named username and password. The name attributes of the fields must exactly correspond to the names used within the rules object of .validate().

  2. Looking at the JavaScript console, I'm seeing a ".validate is not a function" message. Paying attention to jsFiddle's warning message, if you don't use a https URL when adding the external resource, it will not work. I switched the jQuery Validate plugin to its secure CDN link.

  3. You do not need to include both CSS files for Bootstrap. The minified version has the same CSS rules/properties as the un-minified version. Remove one.

Otherwise, the code as you've posted it, is fully working as designed: https://jsfiddle.net/unr17s9u/4/

Upvotes: 1

Related Questions