Search jQuery

jQuery Forum

jQuery Tools Form Validation Check Mark

in Using jQuery • 11 years ago

Hello everyone, I'm new to jQuery and Javascript too, I have a form that gets validated Server-side, and Client-side - And uses the .blur effect to validate when I switch to next field, if it doesn't validate I will get a red text saying it doesn't match - Everything is working fine..

I'm using the tool called jQuery Tools. And I really like that plugin, the only problem I have, is that I want it, if the user fills the right info into the fields, then on blur I want it to set a Green Checkmark image next to the Text input if you understand, or a green Text next to the field saying "OK!" etc.

I've both included jQuery Tools, and jQuery and my JS is looking like this:

$(document).ready(function()
{
//Style selects, checkboxes, etc
$("select, input:checkbox, input:radio, input:file").uniform();
//Date and Range Inputs
/**
* Get the jQuery Tools Validator to validate checkbox and
* radio groups rather than each individual input
*/
$('[type=checkbox]').bind('change', function(){
clearCheckboxError($(this));
});
//validate checkbox and radio groups
function validateCheckRadio(){
var err = {};
$('.radio-group, .checkbox-group').each(function(){
if($(this).hasClass('required'))
if (!$(this).find('input:checked').length)
err[$(this).find('input:first').attr('name')] = 'Venligst udfyld dette felt.';
});
if (!$.isEmptyObject(err)){
validator.invalidate(err);
return false
}
else return true;
}
//clear any checkbox errors
function clearCheckboxError(input){
var parentDiv = input.parents('.field');
if (parentDiv.hasClass('required'))
if (parentDiv.find('input:checked').length > 0){
validator.reset(parentDiv.find('input:first'));
parentDiv.find('.error').remove();
}
}
//Position the error messages next to input labels
$.tools.validator.addEffect("labelMate", function(errors, event){
$.each(errors, function(index, error){
error.input.first().parents('.field').find('.error').remove().end().find('label').after('<span class="error">' + error.messages[0] + '</span>');
});
}, function(inputs){
inputs.each(function(){
$(this).parents('.field').find('.error').remove();
});
});
/**
* Handle the form submission, display success message if
* no errors are returned by the server. Call validator.invalidate
* otherwise.
*/
$(".TTWForm").validator({effect:'labelMate', inputEvent:'blur'}).blur(function(e){
var form = $(this), checkRadioValidation = validateCheckRadio();
if(!e.isDefaultPrevented() && checkRadioValidation){
$.post(form.attr('action'), form.serialize(), function(data){
data = $.parseJSON(data);
if(data.status == 'success'){
form.fadeOut('fast', function(){
$('.TTWForm-container').append('<h2 class="success-message">Sendt!</h2>');
});
}
else validator.invalidate(data.errors);
});
}
return false;
});
var validator = $('.TTWForm').data('validator');
});

The code above is generated by a form builder, but I understand a lot of the code..

But anyone that have a tip/solution for getting the OnSuccess working for each field when changing field? And also if I press submit?

It would be so awesome!

Best regards,

Lucas Rolff

Response title

Attachments

jQuery Forum

jQuery Tools Form Validation Check Mark

Statistics

Tags

Actions