0

I got the following code to validate my form inputs

$(document).ready(function() {
$("#customer-form").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
messages : {
email: {
email: "Votre adresse e-mail devrait être au format suivant : abc@domain.tl"
}
}
})
});

input.error.fail-alert {
border: 2px solid red;
color: red;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}
label.error.fail-alert {
color: red;
width: 100%;
}

I'm looking for a way to add success or fail icons, as it's not possible with pseudo elements.

haze
  • 23
  • 4
  • A quick search turns up a few answers with example code, did you try those already? https://stackoverflow.com/questions/15836465/how-to-add-erroricon-and-custom-validation-message-using-jquery, https://stackoverflow.com/questions/1060995/jquery-validation-show-error-icon-next-to-control-and-error-summary-on-top, https://stackoverflow.com/questions/26325789/jquery-showing-wrong-and-right-icons-for-validation, https://stackoverflow.com/questions/13842403/form-validation-with-jquery-validate-to-show-right-and-wrong-icons-by-overriding ... – Don't Panic Sep 27 '22 at 08:26
  • Does this answer your question? [how to add erroricon and custom validation message using jquery?](https://stackoverflow.com/questions/15836465/how-to-add-erroricon-and-custom-validation-message-using-jquery) – Don't Panic Sep 27 '22 at 08:27
  • Hi, no it doesn't. There is no answer about the icons on this thread, only about the error positioning. I also saw the other threads and I don't find something really relevant... I can't really edit my form actually as it is generated by PrestaShop. I'm also surprised there is no easy way to do this, as it is a "basic" when it comes to form validation. – haze Sep 27 '22 at 11:46
  • From the accepted answer of the first duplicate I linked: "*You must use the highlight and unhighlight callback functions to manipulate the placement and **toggling of your icons***". The second link has an answer including code which shows how to add any HTML you want - it adds and element with class `errorIcon`. The 3rd link shows how you can use CSS with a `background-image` to include an icon. And thd 4th shows simple code again using `highlight` and `unhighlight` to manipulate the CSS to show/hide icons ... – Don't Panic Sep 28 '22 at 08:39

0 Answers0