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, May 03 '13 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. — , May 03 '13 at 18:49
I have attached the screenshot of what i am getting...I am expecting some text here — Deepak Ranjan Jena, May 03 '13 at 18:55

score 2 · Accepted Answer · answered May 03 '13 at 18:54

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 03 '13 at 18:54

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. – diego nunes May 03 '13 at 18:59
@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()`)*. – May 03 '13 at 19:00
there is the possibility of the input being the lastChild and there will be no `nextSibling`. – diego nunes May 03 '13 at 19:01
@DiegoNunes: Just updated my previous comment to explain. ;-) – May 03 '13 at 19:01
@DiegoNunes - that shouldn't be a problem, per here: http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library – talemyn May 03 '13 at 19:02
Just a quick question, how do i remove the span after passing the validation? – Deepak Ranjan Jena May 03 '13 at 19:08
2

@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. – May 03 '13 at 19:10

score 1 · Answer 2 · edited May 23 '17 at 12:03

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 '17 at 12:03

Community

1
1

answered May 03 '13 at 19:04

Andreyy

511
2
11

talemyn · Answer 3 · 2013-05-03T19:01:29.160

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 03 '13 at 19:01

answered May 03 '13 at 18:54

talemyn

7,822
4
31
52

This will add the spanTag as the last element of the parent's children list. An `insertAfter` code is what he is looking for. – diego nunes May 03 '13 at 19:00
@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. – talemyn May 03 '13 at 19:10

How to append Span to input field dynamically using native javascript

3 Answers3