FormIt intuitive input error indicator

Hello all.
I've been trying to achive this without success: I want the form inputs with either empty fields or wrong datatype to return with a red borderline. (this is to replace the "This is a required filed"default.

I also dont get any error message when the form is submitted. really pulling my head with no straight documentation. I've tried hooks and output modifiers, without success.

Will appreciate

Hi ojchris,

to get Error Messages, you'll need the :required modifier in a validate options list (like



) and you'll need a in your form template. If you wan't to have the error message, sth. like



would work.

If you want just a red border instead of the error message, a q&d approach would be to use the error message as a class name on input fields and use css to apply the red border.

thanks Chris for your patient response.

1) I already have most of your recom in place, the only thing I'm not getting is the red borderline I want.

This morning before seeing your response I tried what you suggested but it turned out that the the error message inbuilt to be display thus: <span class="error">warning</span> (warning is the class I want to use in css to achieve the red line). So MODx by default has the '<span class="error">' around the message.

What I did was to change the 'This is a required field' in the Lexicon Management to 'warning', which should have work except for the <span class="error"> script.

If there is a way to eliminate <span class="error"> this would have been a victory.

2) The error message I'm referring to is this:
[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]
which is to be placed just before the <form> tag. When there is an error, nothing is display there. Not even an empty <p></p> tag.

I would like to have something like 'Message failed. Highlighted field(s) below need attention.' when ever the form fails to submit as a result of form inputs.

Thanks for helping

Oh, I see, the span is included in the error message as well.

Now that is giving us a chance just using css (and loosing the IE6 on our way ):



and



Now you don't have the span tags when there is no error but have them when there is one and this is used in the CSS3 ~ selector (supported by all mayor browsers except IE6 or older).

On the other problem regarding the error_message: I don't know why it is empty but I'm seeing the same behavior here. Will dig into that as well.

I don''t get your reference of the span issue.
Whant I want to achieve is this: introduce a 'warning' class to the input field when there is an error in the input like this: by having this

Changing the 'this is a required field' in the Lexicon Management section of MODx to 'warning'only result in me having

What you want to do can be accomplished by putting this in your input:



This adds the error class to the input field if there is an error.

Hope that helps. [ed. note: benmarte last edited this post 11 years, 8 months ago.]

benmarte's solution is a fine idea that should be working for you.

Just to elaborate on the idea with the ~ css selector (for anyone who wants to understand it): when you use the template as written above with the not wrapped in a span as this variable contains a span wrapper in itself, you'll have a



on your page if there is no error and a



if an error is thrown.

The



css selector selects all input elements preceded by a span element with the class error. So this could be used as well to select all input elements preceded by an error message.

Chris and benmarte you have made my day. This has stalled my current project for almost two weeks. Wish there was a way to share a drink with you both electronically.

benmarte's idea worked, and it's one that I've on many threads that it doesn't work. So ignored it and was going round attempting other channels.

@Chris: now I understand. That css3 selector is going to be so stretched as we go. Yet to ungrade to HTML5 and CSS3. The solution is simply amazing!

Many thanks

Glad you got it working, next time your stuck make sure you get on twitter and post a link to your forum post and use the hash tag #MODX you will get help faster that way.

If your not on twitter well then you should be

Happy modxing

yet to find a real need for twitter, but now I think I have.

One last issue with FormIt, is the overriding error message above the form:

This code only seems to display an error message when all validations have been passed but a technical itch beyond MODx occurs. In my case because I am working offline I got this "An error occurred while trying to send the email. Could not instantiate mail function."

Apart from the above, while the affected input fields are have red borderlines, I would like to see a situation where we can have this error message " 'Message failed. Highlighted field(s) below need attention.'" when an input validation failed.

I know I'm stretching MODx customization, but any idea on how to achieve this will be appreciated as always.

Thanks