Add icons inside input fields after validation

Forms SharePoint 2019
1

Hi!
This may be a stretch on asking for help, but I would really appreciate some solution.
I have input fields (all kinds) on a Sharepoint form and I need to validate them. If they are valid, then I need to insert a green checkmark inside their input field (also color their border green). Here is an example:
image
I tried different suggestions, but nothing worked so far. Is it possible to use
The same problem is when they are invalid:
image

Thanks!

2

Dear @Janos_Nagy,
That's an excellent idea! Would you consider paid support to add this to the product as soon as possible? Also, you're using SharePoint 2019 Forms, correct?

4

Well,
I use Sharepoint 2019, that's correct. I actually came up with the following, I hope it helps others.

fd.spRendered(function () {
fd.field("Title").$on("change", function (value) {
$(fd.field("Title").$el).find("input").parent().css("position", "relative");
var iElement = $(fd.field("Title").$el).find("input").next();
if (iElement.is("i")) {
$(fd.field("Title").$el).find("input").css("border-color", "");
$(fd.field("Title").$el).find("i").remove();
}
if (value.trim()) {
$(fd.field("Title").$el).find("input").after('<i class="ms-Icon ms-Icon--SkypeCheck" style="color: green; position: absolute; right: 1rem; top: 6px; font-size: x-large;">');
$(fd.field("Title").$el).find("input").css("border-color", "green");
} else {
$(fd.field("Title").$el).find("input").after('<i class="ms-Icon ms-Icon--Error" style="color: red; position: absolute; right: 1rem; top: 6px; font-size: x-large;">');
$(fd.field("Title").$el).find("input").css("border-color", "red");
}
});
});

Any suggestions?
Thanks for the nudge!

2 Likes