Reset before adding element and class

Question

I've been trying to reset after inserting an element with a class with no success. Tried also innerHTML="" but it is not working. Maybe because I'm using insertAdjacentHTML(). - ? I couldn't find a remove method before inserting.

let small = document.querySelector("small")
let img_1 = document.querySelector('[name="img_1"]')

//Image fields validation

if (img_1.value =="") {
    
    img_1.classList.add('is-invalid_create')
    small = '<small class="text-danger__Create">Campo imagen 1 no puede estar vacío</small>'
    img_1.insertAdjacentHTML("afterend", small);
} else {
    img_1.classList.add('is-valid_create')
    img_1.classList.remove('is-invalid_create')
}

I'm trying to build a validation with an error message if fields are . I used insertAdjacentHTML because innerHTML was not showing the text.

fiddle : https://jsfiddle.net/gzsudqvm/

I tried to do a simpler approach like:

    function setErrorFor(input, message) {
    input.innerHTML = ""
    input.classList.add('is-invalid_create')
    input.innerHTML = "<small class='danger'>"+message+"</small>" 
}

But the message is not rendering, and there are no errors.

Your jsfiddle example is missing a bunch of necessary elements to even be able to test. After either adding or eliminating all the missing stuff, it works fine. — bloodyKnuckles, Sep 26 '22 at 19:21

Driftr95 · Accepted Answer · 2022-09-26T19:29:39.983

It's hard to tell without seeing more of your code - without understanding just how/what you are trying to reset.

tried also innerHTML=""

For which element? If it was something like img_1.innerHTML="", then your small gets left behind because you added it outside img_1 . (If that's intentional/necessary then you could try something like el.parentElement.removeChild(el) to remove the left-over elements separately.)

used insertAdjacentHTML because innerHTML was not showing the text

Does the debugger show any errors? When you inspect the outer element, has it not been added to html at all, or is the text just not rendering?

EDIT: now that I can see the fiddle, I realize the field you're trying to reset is an input type, so you can't change innerHTML - you have to work with value and placeholder and maybe even defaultValue when setting/resetting.

I would suggest just resetting value and showing the message by adding a class with [::after][1] css, but you could also show it by setting a new placeholder or even value [I don't thing setting the error message as value is a good idea at all though]. You can define the placeholder style in css as ::placeholder; but personally, I much prefer the ::after approach.

Thanks, but seems the text is not rendering. In my opinion a img_1.innerHTML = "" before starting , and the img_1.innerHTML ="error", would have been ideal. But is not rendering and no errors in the console. — Santi R, Sep 26 '22 at 19:03
@SantiRiveira Please see my edit - I hadn't realized you were trying to set innerHTML of an input (though I suppose I should have, from the `name` attribute. My bad... partially =P) — Driftr95, Sep 26 '22 at 19:31

Reset before adding element and class

1 Answers1