We make tools that make websites.

Forums (Archived)

The Solspace Support Forums are now CLOSED (read-only)

Check out our new support options here. Please refer to this blog post for more information.

   

Ajax validation doesn’t return field name with errors, ee 2.5.5, freeform pro 4.0.11

RankRank

Total Posts: 92

Joined: May 6, 2005

PM

Ignore

 

HI,

We have just upgraded
EE from 2.5.2 to 2.5.5 - Build: 20121220
Freeform PRO 4.0.3 to 4.0.11

Now the ajax code returns errors but without field names.
If we remove ajax, the native EE user error messages normally return field names.

Here is an example:
before: Required field missing input: Name
after: Required field missing input:

The code in template was not changed after upgrade.
We also tried your ajax code example in a new blank template and got the same problem with missing field names.
Also tried removing some addons but to no avail.

Thanks!

Avatar
RankRankRankRankRank

Total Posts: 9901

Joined: Jan 8, 2009

PM

Ignore

 

Hi Djive,

Can you post your Freeform code here?
What are you using for ajax? Are you using jQuery’s .ajax()? .post()? .load()?
Have you also had a look at the returned ajax response using console.log()? smile

Signature

RankRank

Total Posts: 92

Joined: May 6, 2005

PM

Ignore

 

Hi,

Firebug console didn’t report any errors before and console.log() didn’t help either.

Used only text fields for testing.
Tried with and without captcha.

As mentioned in my first post, I tried using your example code (http://www.solspace.com/docs/freeform/form/#ajax_validation) on a blank template and still got the same result. I mostly tested and worked on this issue with your example code.

Can you try to replicate the issue using your example code?

Just have to mention again that everything worked before upgrade, then just stopped after.

Thanks.

Avatar
RankRankRankRankRank

Total Posts: 9901

Joined: Jan 8, 2009

PM

Ignore

 

I tested the ajax from the example, and although it works, it does seem that the name of the required field is not being returned with the ajax response. It doesn’t seem to be a bug, but just what was set to be returned.

Also, the example code places the required error below the appropriate field, so in a way this already implies which field is involved with the required error. smile

If you absolutely need the field name next to the required error showing right below the field, you could always grab the field name from the field’s <label>.

Signature

Avatar
RankRankRankRankRank

Total Posts: 9901

Joined: Jan 8, 2009

PM

Ignore

 

Also, just in case I’ll ask our developers about this in case I’m missing something smile

Signature

RankRank

Total Posts: 92

Joined: May 6, 2005

PM

Ignore

 

Hi,

Please drop us a line here when you will know if it will remain like this or not so we can adjust our forms.

Thanks a lot!
smile

Avatar
RankRankRankRankRank

Total Posts: 9901

Joined: Jan 8, 2009

PM

Ignore

 

Well, here’s a quick workaround based on the example in the docs.

1. In the {exp:freeform:form} code, instead of

<label>{freeform:field_label}</label

use

<label for="{freeform:field_name}">{freeform:field_label}</label

2. Then, in the ajax code, below

var error         = ($.isArray(item) ? item.join('<br/>') : item); 

add:

var fieldName = $('label[for="' '"]').html(); 

3. Still in the ajax code, change

$errorHolder.append('<p>' error '</p>').show(); 

to

$errorHolder.append('<p>' error ': ' fieldName '</p>').show(); 

Signature

RankRank

Total Posts: 92

Joined: May 6, 2005

PM

Ignore

 

Much appreciated!

RankRank

Total Posts: 34

Joined: Dec 1, 2009

PM

Ignore

 

Hello. I am still having problems with Freeform not showing me the input fields. My general errors displays a “null” for the fieldName variable in your javascript.

Here is my template code

{exp:freeform:composer form_id="4" form:id="ajax_form"}
    
<div class="ff_composer">
{composer:page}
    {composer
:rows}
            
<div class="line">
        
{composer:columns}
                
<div class="unit size1of{composer:column_count}">
                
{if composer:field_total == 0}
 
                {
/if}
            {composer
:fields}
                {if composer
:field_label}
                    {if composer
:field_type == 'nonfield_captcha'}
                        {if captcha}
                        
<p>
                            
{composer:field_label}
                        
</p>
                        
{/if}
                    {if
:else}
                        
<label {if composer:field_name != ''}
                            
for="freeform_{composer:field_name}"
                            
{/if}>
                            
{composer:field_label}
                            {if composer
:field_required}
                            
<span class="required_item">*</span>
                            
{/if}
                        
</label>
                        <
class="description">{freeform:description:{composer:field_name}}</p>
                    
{/if}
                {
/if}
                {if composer
:field_output}
                    {if composer
:field_type == 'nonfield_title'}
                        
                        
<h2>{composer:field_output}</h2>
                        <
div class="error_message"></div>
                    
{if:elseif composer:field_type == 'nonfield_captcha'}
                        {if captcha}
                                {captcha}
<br />
                                <
input
                                    type
="text"
                                    
name="captcha"
                                    
value=""
                                    
size="20"
                                    
maxlength="20"
                                    
style="width:140px;" />
                        
{/if}
                    {if
:else}
                        
                        
<p>{composer:field_output}</p>
                        <
div class="error_message"></div>
                    
{/if}
                {
/if}
            {
/composer:fields}
                
</div>
        
{/composer:columns}
            
</div>
    
{/composer:rows}
{
/composer:page}
    
</div>
{/exp:freeform:composer} 
RankRank

Total Posts: 34

Joined: Dec 1, 2009

PM

Ignore

 

I tried to post the code below and even though it said I had 20 characters left, it wouldn’t submit because the post was “too long”.

Here is my Javascript code (I am linking to the jquery js file):

[removed]
    jQuery
(function($){
        
var $form            = $('#ajax_form');
        var 
$generalErrors    = $('.general_errors');
 
        
$form.submit(function(e){
            
//hide all errors
            
$('.error_message').hide().html('');
            
$generalErrors.hide().html('');
 
            
//jquery ajax shortcut
            
$.post(
                
//form url (Freeform autodetects ajax)
                
$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)
                    
{
                        
//data.errors
                        
$.each(data.errors, function(iitem){
 
                            
var $errorHolder = $('[name="' '"]').
                                                    
parent().find('.error_message');
                            var 
error         = ($.isArray(item) ? item.join('<br/>') : item);
 
                            var 
fieldName = $('label[for="' '"]').html(); 

                            
//does the error holder field exist?
                            
if ($errorHolder.length 0)
                            
{
                                $errorHolder
.append('<p>' error ': ' fieldName '</p>').show(); 
                            
}
                            
//lets add it to general errors
                            
else
                            
{
                                $generalErrors
.append('<p>' error ': ' fieldName '</p>').show(); 
                            
}
                        }
);
                    
}
                    
else if (data.success)
                    
{
                        [removed]
.href data['return_url'];
                    
}
                }
            
);
            
e.preventDefault();
            return 
false;
        
});
    
});
[removed] 
Avatar
RankRankRankRankRank

Total Posts: 9901

Joined: Jan 8, 2009

PM

Ignore

 

Hi capstonedesign,

I am still having problems with Freeform not showing me the input fields.

Do you mean displaying the errors on your form?

Do you get any warnings/error in your browser console?
Have you tried using console.log(data) to see what kind of data is being returned.

Also, if you’re simply copy/pasting the ajax code from the documentation (http://www.solspace.com/docs/freeform/form/#ajax_validation), it may not work since it’s simply an *example*, which happens to be built on the {exp:freeform:form} code above it. You’re using {exp:freeform:composer} with a possibly different markup.

Signature