spence911 Posted April 22, 2014 Share Posted April 22, 2014 (edited) 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> Edited April 22, 2014 by spence911 Quote Link to comment Share on other sites More sharing options...
denno020 Posted April 23, 2014 Share Posted April 23, 2014 (edited) 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. Edited April 23, 2014 by denno020 Quote Link to comment Share on other sites More sharing options...
spence911 Posted April 24, 2014 Author Share Posted 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); } }; }; Quote Link to comment Share on other sites More sharing options...
Solution denno020 Posted April 24, 2014 Solution Share Posted 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."; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.