reactiveraven / jqbootstrapvalidation Goto Github PK
View Code? Open in Web Editor NEWA JQuery validation framework for bootstrap forms.
Home Page: http://reactiveraven.github.io/jqBootstrapValidation
License: MIT License
A JQuery validation framework for bootstrap forms.
Home Page: http://reactiveraven.github.io/jqBootstrapValidation
License: MIT License
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>
00e3b8a needs documenting in gh-pages
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.
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.
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 = '';
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.
needs removing
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.
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
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
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.
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",
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?
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.
I'm wondering how to add custom validation functions.
My current scenario is this:
I have 2 text inputs inside a single control-group:
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!
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?
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.
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?
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?
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.
Currently doesn't consider the 'step' parameter
the form when submit,the event will be trigger repeatedly!
46 line number
$(uniqueForms).bind("submit", function (e) {
var
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),
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
include aria-live=polite
http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
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.
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.
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?
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.
How can I validate a multiple select form? eg check if at least one option is selected?
I set a wrong defalut value,submit form immediately,then validation is not working.
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.
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
.
Please, separate validation messages from code to facilitate the application i18n using your code.
Thanks in advance.
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>
tagcontrol-group
class must be usedcontrols
class must be usedIt would be worth adding this to the "It turns this" example
please close this issue ~~~
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.
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 :)
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());
what to do
form elements is not showing error messages
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]"
Reported in #53 by Oliversalzburg
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.
"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
displaying as 'warning' class, not 'error' class.
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.
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
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.