Created
August 26, 2014 06:26
-
-
Save bjornbjorn/c5c6b59492b5ae2cc245 to your computer and use it in GitHub Desktop.
Freeform AJAX submit
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var validated = false; | |
$('body').on('submit', '.upload-cv-form', function(e) { | |
if(validated) { | |
return true; | |
} | |
// else do validation | |
e.preventDefault(); | |
//hide all errors | |
$('.error_message').hide().html(''); | |
$('.general_errors').hide().html(''); | |
$('input[type=text]').attr('title', ''); | |
$('input').removeClass('error'); | |
var post_url = $('#ajax_validate_url').val(); | |
$form = $('.upload-cv-form'); | |
//jquery ajax shortcut | |
$.post( | |
//form url (Freeform autodetects ajax) | |
post_url, //$form.attr('action'), | |
//form params | |
$form.serialize(), | |
//data handler | |
function(data) | |
{ | |
// ------------------------------------- | |
// `data` is a json string that jQuery | |
// automatically detects and converts. | |
// data { | |
// //posting successful? | |
// | |
// "success" : true/false, | |
// | |
// //object containing error messages | |
// //if success is false | |
// //multiple error messages are an array | |
// //single error messages are a string | |
// | |
// "errors" : { | |
// "field_name1" : 'single error message', | |
// "field_name2" : [ | |
// 'multiple error messages', | |
// 'for the same field' | |
// ] | |
// } | |
// | |
// //the return url of return="" if set, or this current url | |
// | |
// "return_url" : "http://yoursite.com/return/segment/" | |
// } | |
// ------------------------------------- | |
if (data.success == false) | |
{ | |
validated = false; | |
//data.errors | |
$.each(data.errors, function(field_name, error_message){ | |
$('[name='+field_name+']').addClass('error'); | |
var field_label = field_name; | |
var labelHolder = $('[name="' + field_name + '"]').parent().find('label'); | |
if(labelHolder.length > 0) { | |
field_label = labelHolder.html(); | |
} | |
var $errorHolder = $('[name="' + field_name + '"]').parent().find('.error_message'); | |
if($errorHolder.length == 0) { // try to find it based on id | |
$errorHolder = $('#freeform_cv_file0').parent().find('.error_message'); | |
} | |
var error = ($.isArray(error_message) ? error_message.join('<br/>') : error_message); | |
$('[name='+field_name+']').attr('title', error); | |
//does the error holder field exist? | |
if ($errorHolder.length > 0) | |
{ | |
$errorHolder.html('<p>' + error + '</p>').show(); | |
} | |
else | |
{ | |
$('.general_errors').append('<li>' + field_label+ ': ' + error + '</li>').show(); | |
} | |
}); | |
} | |
else if (data.success) | |
{ | |
validated = true; | |
$form.submit(); | |
} | |
} | |
); | |
return false; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The #ajax_validate_url is a hidden input that has the URL for the freeform_ajax_validation method, I get that URL like this in my addon:
.. but it could also just be hardcoded in the template. The script submits once to that URL to validate serverside, and then if verything is OK it submits once again to submit the actual post data. Hacky, and I can't recall why I ended up doing it that way w/Freeform but probably has something to do with the file input .. it works, anyway :-P