× Form Help

Add css to field on validation error

  • m_hockemeyer
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 15
  • Thank you received: 2

m_hockemeyer replied the topic: Add css to field on validation error

Dear Mihaela,

sorry for the late reply. I didn´t have time too look into again until now.
Based on your post I changed the ff_valuenotempy script via Scriptmanager, so I don´t need to touch every single element and create a custom script.

The validation script looks like this now and together with the "hot" validation on focus loss and change it works like a charm:
function ff_valuenotempty(element, message)
{
    if (element.value!='') return ''; 
    if (message=='') message = "Please enter "+element.name+".\n";
    jQuery(document).ready(function(){
        jQuery(element).addClass("field-validation-error");
    });
    ff_validationFocus(element.name);
    return message;
} // ff_valuenotempty
#236417
The following user(s) said Thank You: jimmiewiddle
  • Posts: 3098
  • Karma: 104
  • Thank you received: 406

mihaela replied the topic: Add css to field on validation error

Hello,

I'm glad that the script is working as you wanted. Good job with adjusting the whole script so it can easily be used for all the wanted elements.

Best regards,

MIhaela
#236418
  • Posts: 52
  • Thank you received: 2

jimmiewiddle replied the topic: Add css to field on validation error

Great work with the script! Thanks!

I was wondering if you or anyone had worked out how to remove the class once the user had added text to a field?

Many thanks in advance if can possibly help?
#239214
  • Posts: 3098
  • Karma: 104
  • Thank you received: 406

mihaela replied the topic: Add css to field on validation error

Hello,

If you take a look at the previous page of this topic you will see a code that removes the validation message when the field is filled in.

This is the part that removes the message:
 else {
        jQuery(document).ready(function(){
        jQuery("#ff_elem95").removeClass("field-validation-error");
    });

Let me know whether that helped.

Regards,

Mihaela
#239218
The following user(s) said Thank You: jimmiewiddle
  • Posts: 52
  • Thank you received: 2

jimmiewiddle replied the topic: Add css to field on validation error

Hi, Thanks for that, I didnt spot it!

Although its not working unfortunetly
function ff_valuenotempty(element, message)
{
    if (element.value!='') return ''; 
    if (message=='') message = "Please enter "+element.name+".\n";
    jQuery(document).ready(function(){
        jQuery(element).addClass("invalid");
    } 
   else {  
    jQuery(document).ready(function(){
        jQuery(element).removeClass("invalid");
    });
    ff_validationFocus(element.name);
    return message;
} // ff_valuenotempty

Tells me the following in the console:

ReferenceError: ff_validate_submit is not definedindex.php:1:172
onclick myurl.com/index.php?option=com_breezingf...mponent&ff_frame=1:1

But this alone is working fine:
function ff_valuenotempty(element, message)
{
    if (element.value!='') return ''; 
    if (message=='') message = "Please enter "+element.name+".\n";
    jQuery(document).ready(function(){
        jQuery(element).addClass("invalid");
    });
    ff_validationFocus(element.name);
    return message;
} // ff_valuenotempty

Your time and help is very much appreciated, many thanks in advance!
#239221
Moderators: ForumSupporttomeperica
Time to create page: 0.118 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here