writing javascript form not submit in less fields have been filled out, , if user has not, message pops saying 'please fill out name field' or 'please fill out email field' etc. writing separate function each field (don't know if right way) , when add each function window.onload, pops 1 of messages. advice great.
html
<form id="frmcontact" name="frmcontact" method="post" action="thanks.htm"> <fieldset id="quicksupport"> <legend><strong>quick support</strong></legend> <p> if request isn't urgent, drop quick line , we'll within 24 hours </p> <p> <label for="name">name:</label> <input type="text" value="your name" name="name" id="name" tabindex="10" /> </p> <p> <label for="email">email:</label> <input type="text" value="your email" name="email" id="email" tabindex="20" /> </p> <label for="comments">comments </label> <br /> <textarea name="comments" value="message" id="comments" cols="45" rows="5" tabindex="60" onfocus="if(this.value==this.defaultvalue)this.value='';" onblur="if(this.value=='')this.value=this.defaultvalue;">message</textarea> </p> <p> <input type="submit" name="submit" id="submit" value="send" tabindex="70" /> </p> </fieldset> </form> <p><span id="errormessage"></span></p> <p><span id="errormessage1"></span></p> javascript
function prepareeventhandlers () { document.getelementbyid("frmcontact").addeventlistener("submit", function(event) { // show message if (document.getelementbyid("email").value == "your email") { document.getelementbyid("errormessage").innerhtml = "please provide @ least email address!"; // stop form submitting return false; } else { // reset , allow form submit document.getelementbyid("errormessage").innerhtml = ""; return true; } event.preventdefault(); // prevent form submitting } }); } function prepareeventhandlersname () { document.getelementbyid("frmcontact").addeventlistener("submit", function(event) { // show message if (document.getelementbyid("name").value == "your name") { document.getelementbyid("errormessage1").innerhtml = "please provide name!"; // stop form submitting return false; } else { // reset , allow form submit document.getelementbyid("errormessage1").innerhtml = ""; return true; } event.preventdefault(); // prevent form submitting } }); } function start() { prepareeventhandlers(); prepareeventhandlersname(); } window.onload = start;
you should use browser's built-in validation attributes.
<form id="frmcontact" name="frmcontact" method="post" action="thanks.htm"> <fieldset id="quicksupport"> <legend><strong>quick support</strong></legend> <p>if request isn't urgent, drop quick line , we'll within 24 hours</p> <p> <label for="name">name:</label> <input type="text" value="your name" name="name" id="name" tabindex="10" required /> </p> <p> <label for="email">email:</label> <input type="text" value="your email" name="email" id="email" tabindex="20" required /> </p> <label for="comments">comments</label> <br /> <textarea name="comments" value="message" id="comments" cols="45" rows="5" tabindex="60" placeholder="placeholder when no message written" required>message</textarea> </p> <p> <input type="submit" name="submit" id="submit" value="send" tabindex="70" /> </p> </fieldset> </form>when try submit form, browser automatically display nice error messages you, in user's language. no javascript required.
the reason code failing, because
document.getelementbyid("frmcontact").onsubmit = ... will override previous onsubmit handler you've added.
you need use .addeventlistener() instead, if want add multiple functions.
a more correct way create single function checks, , attach handler, once.
Comments
Post a Comment