JavaScript createTextNode

spence911 · April 22, 2014

I'm using JavaScript to validate a form field. Basically, if the form is submitted and the default value of the field is not altered, a text node with an error message will be generated. Problem is if the submit button is clicked over and over, the error message will appear just as many times as the button is clicked,

ie. Incorrect information.Incorrect information.Incorrect information.Incorrect information.

How do I make the generated message appear only on the first button submit. I tried this but it

JavaScript:

window.onload = function(){
	'use strict';
	
	var errorMsg = 'Incorrect information.';
	
	document.getElementById('btn').onclick = function(){
	
		if(document.getElementById('btn').value == document.getElementById('btn').defaultValue){
			var msg = document.createTextNode(msg);
			document.getElementById('btn').parentNode.appendChild(msg);
			/* This if statement didn't work
			if(msg){
				document.getElementById('btn').parentNode.replaceChild(msg);
			}*/
		}
	};
	
};

html:

<body>
<form action="#" method="POST" id="theForm">
<div><input type="text" name="firstName" id="firstName" value="First Name"/></div>
<input type="button" name="btn" id="btn" value="Submit Info"/>
</form>
<script src="js/validate.js"></script>
</body>
</html>

denno020 · April 23, 2014

Your code doesn't seem to work?

Anyway, one way you could do it is to add your error message to a container of some sort, either a div or span, and then whenever the form is validated, the first thing you do is clear the content of that container.

Then the validator will run as per normal, adding the error message to the container again if the form still doesn't validate.

Something like

<form>
  <div id="error-message"></div>
  <input type="text" id="the-input"/>
  <input type="submit" id="the-submit-btn"/>
</form>

<script>
document.getElementById('the-submit-btn').onclick = function(){
  document.getElementById("error-message").innerHTML = "";
 //Perform your validation, adding the error message back to the container, if required
}
</script>

That's obviously some really rough code, but hopefully it will give you the idea of what I'm suggesting.

spence911 · April 24, 2014

Thanks denno020. I created a <p> container with the id of output and added this at the top of the function: document.getElementById('output').innerHtml = '';. But I'm still getting an error messages on every click instead of just one.

html:

<body>
<div><label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" value="First Name"/></div>
<input type="button" name="btn" id="btn" value="Submit"/>
<p id="output"></p>
<script src="js/validayt.js"></script>
</body>
</html>

js:

window.onload = function(){
	'use strict';
	
	document.getElementById('btn').onclick = function(){
		document.getElementById('output').innerHtml = '';
		if(document.getElementById('firstName').value == document.getElementById('firstName').defaultValue){
			var msg = document.createTextNode('Incorrect information.');
			document.getElementById('output').appendChild(msg);
		}
		
	};
	
};

denno020 · April 24, 2014

The problem is because you're creating a new element, and then appending it.

If you change it to use innerHtml for displaying the error message, then it will only show up once.

if(document.getElementById('firstName').value == document.getElementById('firstName').defaultValue){
    document.getElementById('output').innerHtml = "Incorrect information.";
}

Sign In

JavaScript createTextNode

Recommended Posts

spence911

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

spence911

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information