0

I was tackling a challenge with signup form where I had to show custom error messages based on input validity-

enter image description here

Although I completed the challenge without ::after element, it took me a whole day to find different ways to apply ::after but at the end of the day, I decided to go the way I know and, leave it for another question on stackoverflow.

(From what I know) We can't add pseudo elements to input field with pure CSS. So I thought of adding it to field's parent Form-group. I found on searching through websites the .after() method but it adds child node, not ::after. Moreover, it keeps on adding elements each time I hit submit.

Then I thought of let errorMessage = $("#"+field.parentNode+"::after");, but even before I could do something like errorMessage.css("content","Invalid message"), it throws

unrecognized expression: #[object HTMLDivElement]::after

Now you know how screwed I was before deciding to go my simple way. Summed up everything, I just want to know the solution with ::after if any! And also let me know if any of my above mentioned assumptions were wrong. Here's my solution to this page.

Sapinder Singh
  • 559
  • 6
  • 21
  • I suggest inserting a properly styled div/span/p/whathever after input in the same container and change inner html to show what you need. After and Before elements can be tricky sometimes – Riccardo Manzan May 23 '20 at 08:34
  • 1
    @Tx_monster Though it's just been a month since I started in javascript, I don't know why I just want to know that trickier way, and know why I can't do this. – Sapinder Singh May 23 '20 at 08:38

0 Answers0