jQuery Validator
I wrote this to be a Laravel bundle, so the installation instructions will approach it from that angle; however, the only real dependency is jQuery, so it should be easy to use in any context.
Installation
Clone this repo into your bundles directory or:
php artisan bundle:install jquery-validator
Now edit your application/bundles.php
:
<?php
return array(
// Other bundles and whizbangs...
'jquery-validator' => array(
'auto' => true,
),
);
Next, you'll have to publish the bundle's assets:
php artisan bundle:publish
Optional: Enable Form class
In application/config/application.php
change the following line:
'Form' => 'Laravel\\Form',
to
'Form' => 'Jquery_Validator\\Form',
Usage
You can probably guess that jquery-validator depends on jQuery, so at some point, you'll do something like this:
{{ HTML::script('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') }}
{{ HTML::script('bundles/jquery-validator/validator.js') }}
HTML Markup
Feel free to generate your own markup, using data-validations
attributes. They are just like the Laravel validation rules.
<form id="myForm" method="POST" action="submit.php">
<input name="username" type="text" data-validations="required|alpha_dash" />
<input name="email" type="text" data-validations="email" />
<input name="password" type="password" data-validations="required|confirmed" />
<input name="password_confirmation" type="password" />
<!-- more selects, textareas, etc. -->
<input name="picture" type="file" data-validations="image" />
<input name="submit" type="submit" value="Submit" />
</form>
Or, using the Jquery_Validator\Form
class, do this:
// Somewhere define validation rules...
$rules = array(
'username' => 'required|alpha_dash',
'email' => 'email',
'password' => 'required|confirmed',
'picture' => 'image',
);
// In the view, pass the rules to Form::open()
{{ Form::open('submit.php', 'POST', array('id' => 'myForm'), null, $rules) }}
{{ Form::text('username') }}
{{ Form::text('email') }}
{{ Form::password('password') }}
{{ Form::password('password_confirmation') }}
{{ Form::file('picture') }}
{{ Form::submit('Submit') }}
{{ Form::close() }}
The data-validations
will be set automatically for each input.
Handy. Right? This is a trivial example, but it should be enough to get you started.
JavaScript
So, let's say you want to validate the entire form before "on submit":
$(document).ready(function() {
$('#myForm').validator({
events : 'submit',
selector : 'input[type!=submit], select, textarea',
callback : function( elem, valid ) {
if ( ! valid ) {
$( elem ).addClass('error');
}
}
});
});
The callback provided is called for each input/select/textarea on which validation is attempted, so the elem
in the callback above is the input/select/textarea that contains invalid data - not the parent form.
Want the parent form instead? Use the 'done' callback instead of (or in addition to) the, um..., 'callback' callback.
$(document).ready(function() {
$('#myForm').validator({
events : 'submit',
selector : 'input[type!=submit], select, textarea',
done : function( valid ) {
if ( ! valid ) {
$( elem ).addClass('error');
}
}
});
});
But the code above may be bad because the form submits even if the data is invalid. Let's stop the form submission:
$(document).ready(function() {
$('#myForm').validator({
events : 'submit',
selector : 'input[type!=submit], select, textarea',
preventDefault : true,
callback : function( elem, valid ) {
if ( ! valid ) {
$( elem ).addClass( 'error' );
}
}
});
});
Better. But what if you only want to stop the form's submission when invalid data is present?
$(document).ready(function() {
$('#myForm').validator({
events : 'submit',
selector : 'input[type!=submit], select, textarea',
preventDefaultIfInvalid : true,
callback : function( elem, valid ) {
if ( ! valid ) {
$( elem ).addClass( 'error' );
}
}
});
});
Cool. Now, instead of validating the entire form at once, let's do each input.
$(document).ready(function() {
$('input').validator({
events : 'blur change',
callback : function( elem, valid ) {
if ( ! valid ) {
$( elem ).addClass( 'error' );
}
else {
$( elem ).addClass( 'success' );
}
}
});
});
Nice. That's pretty much it. Please enjoy and let me know if you see any bad behavior.
Custom validation rules
If you want to insert custom validation rules on the client side, that's pretty simple, too.
$(document).ready(function() {
$('input').validator({
...
validate_special: function(attribute, value, parameters) {
return value == 'special';
}
});
});
To trigger the validate_special
rule, the markup would look like this:
<input type="text" data-validations="special">
Known issues
- The validation rules
unique
andexists
will always be valid. The JavaScript in this bundle can't see into your DB, obviously. - The
active_url
rule returns the result of theurl
rule. There's not a good, easy way to check that the URL is active.
License
MIT license - http://www.opensource.org/licenses/mit-license.php