How to append Span to input field dynamically using native javascript

Question

I have 5 input box in my page. I want to check if any field is blank, i will show the error message using a span tag appending to that input field.

Here is my code:

function validateForm() {   
// Declare all the local variable
var inputElements, inputId, inputType, i, inputLength, inputNode;

// Get all the input tags
inputElements = document.getElementsByTagName("input"); 

for(i = 0, inputLength = inputElements.length; i < inputLength; i++) {
    inputId = inputElements[i].id; // Get the input field ID
    inputType = inputElements[i].type; // Get the input field type

    // We will ONLY look for input[type=text]
    if(inputType === "text") {
        inputNode = document.getElementById(inputId);
        if(inputNode.value === "") {
            var spanTag = document.createElement("span"); 
            spanTag.innerHTML = inputFieldBlankErrorMessage;
            console.log(inputNode.appendChild(spanTag));
        }
    }       
}
return false; // Do Nothing

}

This is what i am getting enter image description here

It should append after the input tag. I am getting a weird tag which i don't need. Please help!!!

"is not working" is not an error description; please set up a test case or describe what is not working after debugging the JS using your browsers tools (e.g. the console output) — feeela
– feeela, Commented May 3, 2013 at 18:49
FYI, you don't need to get the .id of the element just to turn around and fetch it by its id. Just use the element from the collection. — user1106925
– user1106925, Commented May 3, 2013 at 18:49
I have attached the screenshot of what i am getting...I am expecting <input /><span>some text here<span> — Deepak Ranjan Jena
– Deepak Ranjan Jena, Commented May 3, 2013 at 18:55

user1106925 · Accepted Answer · 2013-05-03 18:54:16Z

2

You can't .appendChild() anything to an input node, since an input can have no descendants.

Instead, you should insert the new node after it, or something similar.

inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);

DEMO: http://jsfiddle.net/hMBHT/

answered May 3, 2013 at 18:54

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

7 Comments

diego nunes Over a year ago

Actually he wants an insertAfter. As it doesn't exists natively you should create one (using parentNode.appendChild() if last element) or just send him the jQuery code if he have jQuery on the page.

user1106925 Over a year ago

@DiegoNunes: This will do an insert after. I originally excluded the .nextSibling by mistake. The .insertBefore() method will behave like .appendChild() if there's no .nextSibling (in other words, if you don't pass an element as the second argument, it'll just do an .appendChild()).

diego nunes Over a year ago

there is the possibility of the input being the lastChild and there will be no nextSibling.

user1106925 Over a year ago

@DiegoNunes: Just updated my previous comment to explain. ;-)

user1106925 Over a year ago

@DeepakRanjanJena: inputNode.parentNode.removeChild(inputNode.nextSibling). Though you should really consider simply having the span elements in place when the page loads, but give them a class and style them with span.hidden { display: none; } in your CSS. Then it's just a matter of updating the text content of each one and showing/hiding them.

|

Community · Accepted Answer · 2017-05-23 12:03:06Z

1

Simply put you are not supposed to append any elements to input elements.

What you probably want is something like this:

<div class="field">
  <input type="text" name="bla"/>
  <span class="error">This field can't be blank!</span>
</div>

So you need to insert the span before or after the input element. Here is an answer that shows you how.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered May 3, 2013 at 19:04

Andreyy

5012 silver badges11 bronze badges

Comments

talemyn · Accepted Answer · 2013-05-03 19:01:29Z

0

I believe that your issue is that you are trying to append the span as a child of the input, not a sibling (which, I believe, is what you really want).

I can't to be sure without seeing your actual HTML, because I don't know how your inputs are situated in the DOM, but if they have separate parent elements, then you would replace:

inputNode.appendChild(spanTag);

. . . with

inputNode.parentNode.appendChild(spanTag);

Edit: FYI, the code that squint gave below (inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);) would be how you could do it if all of the inputs are under the same parent element. It all depends on how the DOM structure is set up.

edited May 3, 2013 at 19:01

answered May 3, 2013 at 18:54

talemyn

8,0004 gold badges33 silver badges52 bronze badges

2 Comments

diego nunes Over a year ago

This will add the spanTag as the last element of the parent's children list. An insertAfter code is what he is looking for.

talemyn Over a year ago

@DiegoNunes - Yeah, that's what I was trying to say . . . it will work if the each input is under it's own parent. Without the HTML to show the structure, it's hard to tell how to approach it. Just offering up a possibility, if that's how his HTML is set up.

Collectives™ on Stack Overflow

How to append Span to input field dynamically using native javascript

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related