SOLVED: Highlight required fields

Hi,

I would love to get required fields highlighted when pressing the submit button.

Meaning: when a required field is not filled upon hitting the submit button, every missing field should have some sort of highlighting.

Is there anyone who has done something similar in the past?

Thank you for your support!

Chris

Hi Chris,

You can use the fieldErrorClass option in FormCheck to add a class to inputs (except for radio buttons) with errors and then use CSS to style the inputs.

There isn't an easy way to do this with the standard actions but my custom Show HTML [GH] action lets you add FormCheck options like this.

Bob

Hi Bob,

this is really giving me a headache.
I don't know where to put the new Show_Html Action. If I just replace the existing Show_HTML action, and add a class to the form, the form indeed gets the class "error".

What I want to do though, is, give every element, which is required and not filled yet, the new class "error".

Could you please give me a hint on how to use your Custom Action to achieve that?

Thanks a lot,

Chris

Hi Chris,

You need to replace the standard Show HTML action with the [GH] version and then add the extra FormCheck option on the FormCheck tab. I think it will be:

fieldErrorClass: 'error',

It's possible that you may not need the final comma . . .

Bob

Hi Bob,

after adding the FormCheck option you have mentioned, no validations are made anymore. Even though all fields are set to required, the form submits with empty fields. When using the HTML action with the [GH] without the FormCheck option, the standard blue field appears which states, that the field is an required field. (so no difference to the standard Show HTML action.

I guess I miss something of the basic concept of chronoform. 🤨

Chris

Hi Chris,

Sorry I added a ; instead of a : - I've corrected my earlier post. Please try that, if it doesn't work I'll take a more detailed look tomorrow (it's dinner time here).

Bob

Hi Bob,

this indeed solved the problem that no validation at all took place.

The custom class "error" is still not added to the not filled required fields.
I will PM you some credentials to the "work in progress" site in case you want to take a look at the actual site.

Have a good evening and "see" you tomorrow.

-By the way, we will of course buy a licence for your great form before the site goes online.-

Chris

Hi Chris,

Hmm . . . everything is working OK except for the code that adds the class. That is the options are being added to the Form Checker OK and I've added some CSS that turns the input red if the class is added.

I've taken a backup copy of your form and will test on my local server where i have an uncompressed version of the FormCheck code that make it possible to see what is happening.

Bob

Hi Chris,

I eventually untangled this and got it working. There are a few things needed:
[list]

Please upgrade to the latest version of the Show HTML [GH] action - I changed one line this morning (I'll PM you a copy shortly).

In the Show HTML [GH] action add this to the box on the FormCheck tab:

fieldErrorClass: 'validate_error',
display: {
  showErrors: 1,
  addClassErrorToField: 1,
  indicateErrors: 2
},

You may not need all these options: showErrors: 1 shows the errors on tabbing; indicateErrors: 2 lets you see more than one error at a time.

Add this to the Load CSS action:

input.validate_error, select.validate_error {
  border-left: 6px solid red;
}
input[type="checkbox"].validate_error + label, input[type="radio"].validate_error + label {
  border-right: 6px solid red;
}

This shows errors with a red bar to the left of the inputs. You can change the CSS to suit your need but I tested with this version.

[/list]
That should work OK.

Bob

Hi Bob, thanks again for your fast support. Everything works like a charm now.
Don't get drunk on the beer I just sent you :-)

Cheers,

Chris

Hi Bob,

just to let you know for future developments of your component:

I have encountered a very strange behaviour when switching between simple and advanced wizard mode.
Sometimes, when switching to advanded mode to edit an action after using the simple mode to edit an email layout, all the changes done to the actions are resetted! Instead of my custom actions, the standard actions, that were there when creating the form at first, appear.

This isn't to hard with my rather simple form, but can be a real bummer for more advanced forms.
Just let me know if you need any more infos on that. Feel free to login to my site, if you want to experience it for yourself. Please backup the form though :-)

Chris

Hi Chris,

In general you should *never* switch from the Normal/Advanced Wizard back to the Easy Wizard. There is no need to do that and if you do - you may well lose any custom settings and actions :-( All of the tab contents in the Easy Wizard is still available in the Actions in the Normal/Advanced Wizard.

There used to be a message about this in earlier versions but Max has removed it for some reason. There's a bit more in this FAQ.

Bob

Okay, understood. You should really add the warning in future releases since the behaviour is not that obvious.

Thaks for your support so far.
I will mark that thread as SOLVED.

Chris

Hi Chris,

I agree - I don't have any control over the released code but I have added this to the current bugs list in the forum here to remind Max for the next release.

Bob

Hi Bob,

I have one other question concerning the form validation.

When submitting the form within Internet Explorer 8, no validations are made. The JS doesn't seem to be compatible with this older, but not totally outdated, version of IE.

Are you aware of this behaviour? Do you haven an idea on how to solve this issue?

Greetings from Berlin,

Chris

Hi Chris,

I don't know. Checking my copy of the form with IE9 in IE8 mode everything looks OK. I can no longer see your form to check that.

Bob

Oh sorry. I just reactivated your account. Please use same credentials as in my PM from last week if you wish to have a look.

Chris

Hi Chris.

It looks OK here. I checked both IE9 in IE8 browser mode and IE8 running on XP in a Virtual PC and the validation appears OK in both versions.

Bob

Thanks for checking, Bob.
Seems to be an issue with the settings on my PC at work. I am working for a big corporation and it might be that they have some security settings that prevent the validation to work :-?

Never mind then.
If you have checked it within a "normale" configuration and it works, everything is fine.

Thank you!