reactiveraven / jqbootstrapvalidation

A JQuery validation framework for bootstrap forms.

jqBootstapValidation

A JQuery validation framework for bootstrap forms.

Displays validation errors in help-block elements as users type.

How to use?

The documentation is here.

Developers

Want to contribute? Great! Check out [CONTRIBUTING.md]

jqbootstrapvalidation's Issues

Docs 1.x inconsistent use of novalidate

Reported in #53 by Oliversalzburg

Performance problem with required field on IE8

We've an immediate problem with required fields in Internet Explorer 8; typing in the field is too slow. We're using version 1.3.6.

An example input has data-validation-required-message="blah blah" and no required attribute.

My guess is that the validation is done on keypress/down/up when it actually shouldn't be for required fields. Required fields should only be checked on blur, right?

Is there anything I can do to enforce required fields only being checked on focus and blur?

minimum charecters Trigger

hi,
i think it is a good idea to set a minimum characters to be written before validation kicks in, because this is sometimes user-annoying, and it helps with ajax validation too, so there wont be ajax call until for example the user typed 3 letters.

thanks in advanced.

Validation messages not populating into help block.

Perhaps I am missing some obvious requirement, but I have having difficulty getting validation messages to populate in the help block when I try to submit the form on this page; http://jetdock.obdevsite.com/dealerapp.asp

Any ideas here? What am I missing?

Unattach messages for easy translation

Please, separate validation messages from code to facilitate the application i18n using your code.

Thanks in advance.

SELECT drop down controls focus issue on <=IE8

On IE6, 7 and 8 any SELECT html drop down controls when clicked seem to blur out of focus and close. Normally the first click and select works, then try to reselect a different option from the list will normally see the drop down list close immediately which prevents you from making a selection.

I found if I remove the click event (see below) it will stop this problem occurring. The problem does not occur in IE9 / 10 or other browsers.

      $this.bind(
        [
          "keyup",
          "focus",
          "blur",
         /* "click", // removed to fix focus problem on SELECT control in <=IE8 */
          "keydown",
          "keypress",
          "change"
        ].join(".validation ") + ".validation", 

License Type?

email validator too strict

"Abc\@def"@example.com
"Fred Bloggs"@example.com
"Joe\\Blow"@example.com
"Abc@def"@example.com
customer/[email protected]
[email protected]
!def!xyz%[email protected]
[email protected]

http://haacked.com/archive/2007/08/21/i-knew-how-to-validate-an-email-address-until-i.aspx

Improve 'number' validator

Currently doesn't consider the 'step' parameter

Checkboxes' labels

I have not tried your javascript code (I'll do) but I've seen that there's an CSS problem in your examples:
Checkboxes' label should go with 'checkbox' class for a better look.

Here I leave you a jsfiddle. http://jsfiddle.net/7krBd/

Sorry for my bad English.
Thank you.

Request: Validate that a select field has been set

Would it be possible to include an option to require a select field has anything other than the first option selected?

Either via select option:first-child or selectedIndex behind the scenes... or something like that :)

How do I stop form elements that are not visible from being validated?

I have a form with two parts, each inside a div.

I show and hide these divs based on a drop down.

How do I stop the form items inside the hidden div from being validated?

Or is there a better way for me to create this dynamic form?

Thanks,

Ben

Packagist

Would you mind putting this project on Packagist?
We'd love to use Composer to manage our use of this project a bit better (like we do with some others), to be sure which version we're using/have modified, etc.

All that's required is that a composer.json file is added at the root of the project containing a summary of the project and that versions are tagged (git tag -a 2.1.0 -m "tagging 2.1.0").
See the Packagist about page) for more detail on each step.

I can add the composer.json file if you like.

JQBoostrapValidation doesn't trigger on Ember.js default action

I figured out that the JQBootstrapValidation framework does not trigger with the default {{action}} helper of Ember.js.

The following doesn't work (without any on advise, the default gets taken which is on="click"):

<button type="submit" class="btn" {{action saveProject project}}>Add</button>

But this one does work:

<button type="submit" class="btn" {{action saveProject project on="mousedown"}}>Add</button>

So it looks like that the JQBootstrapValidation doesn't trigger on the click event. Is this intended?

Unable to override validationRequiredMessage

Even if I set data-validation-required-message on my input box, I still get the default error message.

The value is read just fine using $this.data("validationRequiredMessage"), yet, the value isn't used. I confirmed this at https://github.com/ReactiveRaven/jqBootstrapValidation/blob/1.3.6/jqBootstrapValidation.js#L164

While hunting for the source of this, I noticed something weird at https://github.com/ReactiveRaven/jqBootstrapValidation/blob/1.3.6/jqBootstrapValidation.js#L288 It looked to me like hasOverrideMessage is always true because the messages were set earlier. A simple alert(hasOverrideMessage) confirms this.

So, I'm somewhat confused about what's going on.

minlength="x" maxlength="x" can't be used in combination

Seems that you can't use the attributes

minlength="8" maxlength="8" 

on a single field in order to require a number exactly 8 digit.

You would have to use a pattern similar to

pattern="^\d{8}$"

as an alternative.

Could it be made a little simpler by using these html5 fields in combination?

Non-required erroring fields preventing submit

and they don't show the error message.

Found by @mikeemoo

When a field has a required format (eg: email) but is not required, it should not block submitting the form if no input is given. To force the user to enter a value, the coder should use required.

Documentation example is missing some details

The documentation, particularly the "It turns this" example on http://reactiveraven.github.com/jqBootstrapValidation does not indicate what HTML tags and attributes need to be in place before this plugin will work.

I found out (after having to examine the source code in detail) that the following is required for the plugin to work:

• novalidate="novalidate" on the <form> tag
• control-group class must be used
• controls class must be used

It would be worth adding this to the "It turns this" example

callback validation not working when have default value

I set a wrong defalut value,submit form immediately,then validation is not working.

semanticallyStrict docs

00e3b8a needs documenting in gh-pages

Not showing validation message

what to do
form elements is not showing error messages

Chrome validation fails for type=number and Required

This input box always fails validation in Chrome when entering a decimal value, eg: "5.5", only whole numbers are accepted:

input type="number" id="txtAnumber" name="txtAnumber" placeholder="0.00" required data-validation-required-message="Please enter your gross earnings" maxlength="10"

Does not fail in IE.

Remove the required attribute and the validation will allow a decimal value in Chrome.

Script fails with classname in selector

I have multiple forms on the same page, and I only wanted to validate one of them, so I added the class form-validated to the form that I wanted to validate, and then changed the jQuery selector to;

$('.form-validated').children("input,select,textarea").not("[type=submit]").jqBootstrapValidation();

I'm not sure exactly what's happening, but when I do this, most of the validation feedback doesn't seem to work anymore. I didn't notice any JS errors in the console. Here's an example; http://front-end-base.obdevsite.com/base-styles.asp#validation

'Uncaught TypeError: Cannot read property 'length' of undefined' on file input

I'm using Jansy Bootstraps' image upload module and jqBootstrapValidation to set that input to required.

Here's a fiddle:
http://jsfiddle.net/KQmgC/

When just clicking 'Submit' it works appropriately, but when I click the 'Select Image' button and select an image, I get the following in console:
Uncaught TypeError: Cannot read property 'length' of undefined

The error appears to come from the following in jqBootstrapValidation.js:

$.each($(el).triggerHandler("validation.validation", params), function (j, message) {...});

It's certainly in jqBootstrapValidation.js -- if you remove validation code it works as expected (minus validation, of course)

I've been unable to figure out the underlying cause, or I'd fork and submit a pull request.

url validators

i can't find validation for url
i knew it can be done using regex validation
but i think it should have the url rule

error in documentation

In the email validator the attribute
data-validation-email-message
must say
data-validation-validemail-message

I've checked the source code for that.

great job anyway

Submit event bug!

the form when submit，the event will be trigger repeatedly！

46 line number

$(uniqueForms).bind("submit", function (e) {
var $form = $(this);
var warningsFound = 0;
var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter);
$inputs.trigger("submit.validation").trigger("validationLostFocus.validation");

                $inputs.each(function (i, el) {
                    var $this = $(el),

Highlight switch to MIT license

Form submits even when orange-state validation isn't green.

We have an issue with our forms. Regardless if you have filled in the correct required state (orange indication)or not a form will submit, passing the validator.

<form method="post" action="UserRegForward" onSubmit="return FV.submit(this);" id="f" class="form-horizontal" novalidate>
              <div class="control-group">
                <label for="firstname">First Name</label>
                <div class="controls">
                  <input type="text" name="firstname" id="firstname" required/>
                  <p class="help-block"></p>
                </div>
              </div>
                <div class="control-group">
                <label for="firstname">Last Name</label>
                <div class="controls">
                  <input type="text" name="lastname" id="lastname"/>
                  <p class="help-block"></p>
                </div>
              </div>
              <div class="control-group">
                <label for="email">Email Address</label>
                <div class="controls">
                <input type="email" name="email" id="email" required/>
                <p class="help-block"></p>
                </div>
                </div>
                <div class="control-group">
                <label>Contact Purpose</label>
                <div class="controls">
                  <label class="checkbox">
                    <input 
                      type="checkbox" 
                      name="typeofaccount" class="optionsRadios"
                      data-validation-maxchecked-maxchecked="1" 
                    /> Feedback
                  </label>
                  <label class="checkbox">
                    <input type="checkbox" name="typeofaccount" class="optionsRadios"/> Technical Support
                  </label>
                  <label class="checkbox">
                    <input type="checkbox" name="typeofaccount" class="optionsRadios" /> Other
                  </label>
                  <p class="help-block">Select one</p>
                </div>
              </div>

  <div class="control-group">
    <label for="message">Message</label>
    <div class="controls">
      <textarea rows="8" minlength="24" class="input-xxlarge" name="message" id="message" required></textarea>
      <p class="help-block">Please include company name and the type of account you have if applicable.</p>
    </div>
  </div>
<div class="formaction">          
    <button class="btn btn-success btn-large padds">Submit</button>
</div>
</form>

The imbedded code we have is:

<script src="js/jquery.js"></script> 
<script src="js/jqBootstrapValidation.js"></script>
<script>
  $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>

Use validation outside the context of a form

jqBootstrapValidation seems to only work inside the context of a form submit. But this does not work well with some use cases. Why can't I validate a single component any time I want? something like:

$('#my-text-field').jqBootstrapValidation('validate');

To have the validation error show for that component?

Missing support for multiple select validation

How can I validate a multiple select form? eg check if at least one option is selected?

Configurable event for triggerring validation ?

By default, jqBootstrapValidation listens to many events like blur, keyup, keydown, change of form input. But for some of inputs like text box, it's more friendly to alert user only when the input blurred. It's quite annoying that the error message is displayed when the user is just starting to input.

So I think it will be great if we can configure which event to trigger validation.

Ajax values are not encoded

I'm trying to validate an e-mail address via Ajax, and e-mails with a '+' in the username have the '+' stripped out when the value is extracted on the server side.

<input type="email" id="email" required data-validation-ajax-ajax="/valid-email">

If the user enters [email protected] then on the server (in Ruby):

# Expecting "[email protected]"
email = params[:value]

But the parameter value will be "username [email protected]"

aria-live

include aria-live=polite

http://www.w3.org/TR/wai-aria/states_and_properties#aria-live

JavaScript floating-point calculation error

There are floating-point calculation error in the number validator.
If the step of e.g. 0.001 sets and we checked a number like 11452.199, you get a false validation.
One solution would be the following.

while (multipliedStep % 1 !== 0) {
    multipliedStep = parseFloat(multipliedStep.toPrecision(12)) * 10;
    multipliedValue = parseFloat(multipliedValue.toPrecision(12)) * 10;
}

Sorry for my bad English.

empty select null value error

I have a form where a selects options are populated via ajax, and can be empty, under certain conditions.

If a select field is empty (i.e 0 options) and you try to submit a form, validation fails because .val() will return null.

The problem seems to be on line 864 of jqBootstrapValidation. Adding the following below that line seems to fix it.

if(value == null) value = '';

docs still list "why no ajax"

needs removing

Support for modal

on my app i have modded this plugin for support the modal.
Mte90/Simple-Invoice-Manager@e45a89e
This commit conatian the version modded :-)

the problem on modal that the button are out of the form.
i have added a data tag on parent of the button that contain the id of the form, a new option that contain the event :

jQuery(document).on(
    'change',
    'input,select,textarea :not([type=submit])',
    function() {
        jQuery(this).jqBootstrapValidation();
    }
);
jQuery(document).on(
    'click',
    '.btn-primary',
    function(e) {
        jQuery('input,select,textarea').jqBootstrapValidation();
        jQuery(this).jqBootstrapValidation('init',{event:e});
    }
);

With my hack for execute the check on click and the prevent of submit need to use the init method.

ajax validation not working?

Hello,
I'm using latest version of jquery (from CDN) and ver. 1.3.4 for jqBootstrapValidation.js
I've spend 4 hours yesterday, but I still can't get ajax validation to work. If the ajax validation URL is non-existing, Chrome reports a 404 error (one thing to note, the value in the URL is only the first character from the field. Ex. I type 'admin', the requested 404 URL becomes value=a), otherwise no errors, but no validation either.
Is the validation done on each keystroke or just on loose focus (like the others?)

The server side is exactly like in your example and it works (if I execute it directly from the browser).

Please help me. Thank you.

Custom Validaiton Scenarios

I'm wondering how to add custom validation functions.

My current scenario is this:

I have 2 text inputs inside a single control-group:

• Driver's License State
• Driver's License #

The validation rules are:

State is required only if the # if filled in. State must be 2 characters long.

I'm thinking I need a custom validation function, but I don't see in the documentation how to add it.

I also want these 2 inputs to share a single help-block, because logically it's 1 field, though it has 2 input.

Thanks for the library and your help with this problem!

It don't work well with bootstrap v 2.2.1

please close this issue ~~~

Set up on all forms without using selector string

As suggested by @mikeemoo it could be easier if you could just call

$.jqBootstrapValidation()

and have it find all the elements you want, rather than having to filter them out first.

Feedback on Submit Button

I'm playing around with this on a responsive site on iPhone, and I noticed that if the form doesn't validate, it is possible that the user may not see any visual feedback if they have scrolled past the fields that don't validate. Perhaps adding a warning/error class to the submit button, or a disabled attribute if the input isn't yet valid. Not exactly sure of the best way to do this, but I thought I'd throw it out there as an idea.

jQuerie's Unique method doesn't work in IE9 without sorting

I'm getting duplicate warnings on IE9 when I apply validation to number fields, upon entering non numeric characters. The fix for this is to sort the errorsFound array before executing unique method.

Change:
errorsFound = $.unique(errorsFound);

To:
errorsFound = $.unique(errorsFound.sort());

Request: Ability to invoke validation on selected form controls

There doesn't seem to be a way to selectively validate form fields and get the validation outcome. This would be useful for implementing multi-page forms.

dynamic elements support

hi,
great library, but it is not working when elements are created dynamically, like when using konckout.js foeach to create lists

i have tried this and still not working

    $("input,select,textarea").not("[type=submit]").live().jqBootstrapValidation();

thanks in advanced.

Unable to get the data-validation-required-message to work.

I am unable to get the data-validation-required-message to work with my form.
I looked up #53 but adding novalidate to my form completely got rid of validation and the form was submitted.

Help on this would be appreciated.

Don't work correctly on iOS, IE9 ?

Hi,

I have only one input field with required atribute and i get OK even if value empty.

on Firefox and Chrome work fine

Did I miss something?

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>jqBootstrapValidation by ReactiveRaven</title>

        <link rel="stylesheet" href="http://reactiveraven.github.com/jqBootstrapValidation/css/bootstrap.css">
        <script src="http://reactiveraven.github.com/jqBootstrapValidation/js/jQuery-1.7.2-min.js"></script>
        <script src="http://reactiveraven.github.com/jqBootstrapValidation/js/bootstrap.js"></script>
        <script src="http://reactiveraven.github.com/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>

        <script>
            $(function() {
                $("input,textarea,select").jqBootstrapValidation(
                    {
                        preventSubmit: true,
                        submitError: function($form, event, errors) {
                            // Here I do nothing, but you could do something like display 
                            // the error messages to the user, log, etc.
                        },
                        submitSuccess: function($form, event) {
                            alert("OK");
                            event.preventDefault();
                        },
                        filter: function() {
                            return $(this).is(":visible");
                        }
                    }
                );
            });
        </script>

    </head>
    <body>
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#validators_required_preview">Example</a></li>
        </ul>
        <div class="tab-content">
            <div id="validators_required_preview" class="tab-pane active">
                <form class="form-horizontal">
                   <input name="some_field" required="" value="" type="text">
                   <button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button></form>
            </div>
        </div>
    </div>
</body></html>

Filip

How do you validate a list (ul)?

I was attempting to validate if an ul contains at least one li, but the min and minlength properties does seem to have any effect.

I also tried to work with a data-validation-callback-callback but that didn't seem to have any effect either.

Visual error on match fields on submit

displaying as 'warning' class, not 'error' class.