Validation error CSS

3 years ago
Good morning, how do I set a custom style for the validation of the fields in the checkout billing address page?

I wish the unvalidated fields present a red border.

Thank you.
Vincenzo Di Modugno
3 years ago
Bagarozzo wrote:
Good morning, how do I set a custom style for the validation of the fields in the checkout billing address page?

I wish the unvalidated fields present a red border.

They get assigned a class of input-validation-error so this should do it:

input.input-validation-error {
    border-color: red;
}

If you want them to stay red when focused then you might want to also add a focus pseudo selector:

input.input-validation-error,
input.input-validation-error:focus {
    border-color: red;
}
3 years ago
Thank you very much.

Locally with the original theme it works perfectly, but when I make the same change in our demo environment with the theme "Pavillon" of "nopTemplate" does not work.

Add the css rule either way in "styles.css" file under the theme directory.

Below is an extract html of a field on the checkout page:


<div class="inputs">
        <label for="NewAddress_FirstName">Nome:</label>
        <input class="text-box single-line input-validation-error" data-val="true" data-val-required="Il nome è obbligatorio" id="NewAddress_FirstName" name="NewAddress.FirstName" value="Vincenzo" type="text">
        <span class="required">*</span>
        <span class="field-validation-error" data-valmsg-for="NewAddress.FirstName" data-valmsg-replace="true"><span for="NewAddress_FirstName" class="">Il nome è obbligatorio</span></span>
    </div>
3 years ago
petemitch wrote:
Good morning, how do I set a custom style for the validation of the fields in the checkout billing address page?

I wish the unvalidated fields present a red border.
They get assigned a class of input-validation-error so this should do it:

input.input-validation-error {
    border-color: red;
}

If you want them to stay red when focused then you might want to also add a focus pseudo selector:

input.input-validation-error,
input.input-validation-error:focus {
    border-color: red;
}



It does not really work if you add the code with the instruction :focus.

Putting only the first statement works well.

thanks.
Vincenzo