After an error, the input text is permanently red

  • Resolved John Webber

    (@bilion)


    1 month, 2 weeks ago

    Hi!

    Thank you for this great plugin

    To test, I didn’t fill in anything, and just pressed Submit.
    The problem is that the text in the input remains red when the user starts typing, and even when they have provided the correct type of input.
    Obviously not a good user experience.
    I’m sure this can be solved with CSS only.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Guido

    (@guido07111975)

    1 month, 2 weeks ago

    Hi John,

    Not easy to fix, because field validation is upon form submit. As far as I know this is only possible by using JavaScript and VS Contact Form doesn’t use this for validation.
    If you think this could be solved by CSS only, please point me in the right direction. But I will look into this further myself as well.

    Guido

    Thread Starter John Webber

    (@bilion)

    1 month, 2 weeks ago

    Hi Guido,

    The error label and the input has the same class ‘vscf-error’. Just remove the class from the inputs.

    Here is the rule:

    #vscf .vscf-error {
        border-color: #ff0000;
        color: #ff0000;
        font-size: 0.9em;
    }

    This is what I wrote to override it:

    #vscf :is(input, textarea).vscf-error {
        color: inherit;
    }

    There are CSS only ways for form validation and instruction pop-ups as the user is typing.
    You can find it on YouTube.
    But in this case, removing the class solves it.

    John

    Plugin Author Guido

    (@guido07111975)

    1 month, 2 weeks ago

    Hi John,

    I can remove the error class from the input (so text becomes never red), but the border stays red and the error notice stays present, until pressing submit again. So this may also cause confusion.

    I know about the default validation / popups, but this only comes with default input attributes such as required and type. So I cannot use this for the more complex validation, such as the “banned words” feature of the plugin.

    I have build the plugin many years ago and included PHP-validation only. I don’t have the knowledge to do this with JavaScript / Ajax (which is mostly used).

    But I will try to find a solution to remove the red when typing in the input field. Guess this must be possible with some JavaScript, that overrides the error class.

    Guido

    Plugin Author Guido

    (@guido07111975)

    1 week, 2 days ago

    Hi John / @bilion

    I will improve the validation in next plugin version, by using the HTML/CSS validation as described in the Mozilla docs. Try to update plugin next week.

    Guido

    Plugin Author Guido

    (@guido07111975)

    6 days, 8 hours ago

    Forgot to mention:
    For the more complex validation, such as the “banned words” feature, the current validation stays.

    Guido

    Thread Starter John Webber

    (@bilion)

    4 days, 8 hours ago

    Thank you for your hard work, and support

    John

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.