× Form Help

Add css to field on validation error

  • m_hockemeyer
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 13
  • Thank you received: 1

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

Dear,

something went wrong and I can´t find my original post. Sorry if I posted twice!

I want to highlight input fields that are not valid with a red border and red text color.
I´ve searched through the forums and I stumbled upon a topic where it was said that this can be achieved with an action script on every field that should have this behaviour.
Hovewer the final solution was not stated in the topic.

I tried the following on my input field "txtName" wich has the ID #ff_elem95 (I looked the ID up in the source code of the generated page):
function ff_txtName_action(element, action)
{
var check = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!check.test(element.value)) {
    jQuery(document).ready(function(){
        jQuery("#ff_elem95").css({"border-color": "red"});
    });
}
else {  
    jQuery(document).ready(function(){
        jQuery("#ff_elem95").css({"border-color": ""});
    });
}
}

But this script does nothing to my field. I´m by far no JS expert, so any help would be highly appreciated!

Thanks,
Martin
#236249
  • Posts: 2348
  • Karma: 85
  • Thank you received: 315

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

Hello,

This is an example Actionscript that you have tried to write, am I right?

I've tested this Actionscript for my form and it is working fine.
function ff_txtName_action(element, action)
{
var check = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!check.test(element.value)) {
    jQuery(document).ready(function(){
        jQuery("#ff_elem28827").css({"border-color": "red"});
        jQuery("#ff_elem28827").css({"color": "red"});
    });
}
else {  
    jQuery(document).ready(function(){
        jQuery("#ff_elem95").css({"border-color": "black"});
        jQuery("#ff_elem28827").css({"color": "black"});
    });
}
} // ff_txtName_action
In order to run the Actionscript you need to click on some other field.

Try to do so and let me know the result. If it doesn't work can you send me a link to your form so I can tell you whether you've used the right ID?

Regards,

Mihaela
#236262
  • Posts: 156
  • Karma: 1
  • Thank you received: 14

Eddy.vh replied the topic: Add css to field on validation error

Hi Martin, Mihaela,

The solution by Mihaela is of course all good and operational.
There is however an alternative solution (i think lighter) which would be to give a type (email, url, tel.) Or a pattern to an element for, in a style sheet css, take advantage of the pseudo selector :invalid offered by CSS3+.
If you speak French, I wrote a tutorial about it.

In another language, a translator would probably help you.
#236265
  • m_hockemeyer
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 13
  • Thank you received: 1

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

Hi Mihaela,

sorry, you are right, it works! I didn´t select an action option (e.g. "change") and thats why nothing happened...

However, I´ve changed the script to add and remove a class instead, because the existing css rules override the added style by the !important rule.
And apparently jQuery does not support to add important in the element stlye.

For anyone who is interested, this is how the script looks now:
function ff_txtName_action(element, action)
{
if (!element.value) {
    jQuery(document).ready(function(){
        jQuery("#ff_elem95").addClass("field-validation-error");
    });
}
else {  
    jQuery(document).ready(function(){
        jQuery("#ff_elem95").removeClass("field-validation-error");
    });
}
} // ff_txtName_action

This adds a class "field-validation-error" if the fields value is empty, undefined or null.

I have one more question though. Can you advise on how I would need to change the script or what I need to do, in order to only have the scripts functionality at form validation (after visitor clicked on "submit")?

Best regards,
Martin
#236267
The following user(s) said Thank You: MarioPuco
  • m_hockemeyer
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 13
  • Thank you received: 1

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

This sounds very promising! Will try, thank you!
#236269
  • Posts: 2348
  • Karma: 85
  • Thank you received: 315

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

Hello again,

Thank you for sharing the solution with the community. In Actionscript Action always has to be checked because it determines when will the script run.

To have the scripts functionality at form validation (after visitor clicked on "submit") you have to write validation script instead of Actionscript.

That way, user won't be able to submit the form until he enters the right value.

Go to Properties of the txtName field and in Validation section check the Required checkbox. As Validation script select Custom.

In the code area below put the following code:
function ff_txtName_validation(element, message)
{
var check = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!check.test(element.value)) {
        if (message=='') message = " Entered value is not in good format.\n"
        jQuery(document).ready(function(){
        jQuery("#ff_elem95").addClass("field-validation-error");
    });
        ff_validationFocus(element.name);
        return message;
    } // if
    else {
        jQuery(document).ready(function(){
        jQuery("#ff_elem95").removeClass("field-validation-error");
    });
        return '';

    }
} // ff_txtName_validation
That should do the trick.

Let me know whether you've managed to apply this to your form and whether it works as you wanted.

Best regards,

Mihaela
#236270
The following user(s) said Thank You: m_hockemeyer
Moderators: ForumSupporttomeperica
Time to create page: 0.073 seconds

Summer Sale!

50% discount on all of our extension subscription plans & templates!

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!

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