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.
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
In application/config/application.php change the following line:
'Form' => 'Laravel\\Form',
to
'Form' => 'Jquery_Validator\\Form',
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') }}
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.
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.
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">
- The validation rules
uniqueandexistswill always be valid. The JavaScript in this bundle can't see into your DB, obviously. - The
active_urlrule returns the result of theurlrule. There's not a good, easy way to check that the URL is active.
MIT license - http://www.opensource.org/licenses/mit-license.php
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent