Javascript, Only send email when form validates correctly -
i have 2 separate buttons on html form validate inputs , send form respectively. want merge these buttons email generate when form validated correctly. i've included code below , solutions or ideas appreciated:
// javascript document function validateform() { //sets variables testing inputs obtaining values entered field var firstname = document.getelementbyid('txtfirstname').value; var lastname = document.getelementbyid('txtlastname').value; var dob = document.getelementbyid('txtdob').value; var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/; //this pattern acts template dob field follow var email = document.getelementbyid('txtemail').value; var atpos = email.indexof('@'); var dotpos = email.lastindexof('.'); //these variables check placement of @ , . inside email input var feedback = document.getelementbyid('txtfeedback').value; var invalidform = 0; if (firstname == "") { document.getelementbyid('txtfirstname').classname = "errorstyle"; document.getelementbyid('errfirstname').innerhtml = "must enter valid first name"; invalidform=1; } else if (firstname.length >15) { document.getelementbyid('txtfirstname').classname = "errorstyle"; document.getelementbyid('errfirstname').innerhtml = "must less 15 characters"; invalidform=1; } else if (isnan(firstname) == false){ //checks whether input umber or not document.getelementbyid('txtfirstname').classname = "errorstyle"; document.getelementbyid('errfirstname').innerhtml = "letters please"; invalidform=1; } else if (firstname.length <3) { document.getelementbyid('txtfirstname').classname = "errorstyle"; document.getelementbyid('errfirstname').innerhtml = "must more 3 characters"; invalidform=1; } else { document.getelementbyid('txtfirstname').classname = "defaultstyle"; document.getelementbyid('errfirstname').innerhtml = ""; } if (lastname == "") { document.getelementbyid('txtlastname').classname = "errorstyle"; document.getelementbyid('errlastname').innerhtml = "must enter valid surname"; invalidform=1; } else if (lastname.length >15) { document.getelementbyid('txtlastname').classname = "errorstyle"; document.getelementbyid('errlastname').innerhtml = "must less 15 characters"; invalidform=1; } else if (isnan(lastname) == false){ document.getelementbyid('txtfirstname').classname = "errorstyle"; document.getelementbyid('errfirstname').innerhtml = "letters please"; invalidform=1; } else if (lastname.length <3) { document.getelementbyid('txtlastname').classname = "errorstyle"; document.getelementbyid('errlastname').innerhtml = "must more 3 characters"; invalidform=1; } else { document.getelementbyid('txtlastname').classname = "defaultstyle"; document.getelementbyid('errlastname').innerhtml = ""; } if (dob == null || dob == "" || !pattern.test(dob)) { //tests whether dob field empty, blank, or doesn't fir template set seen above in variables document.getelementbyid('txtdob').classname = "errorstyle"; document.getelementbyid('errdob').innerhtml = "must enter valid date of birth (dd/mm/yyyy)"; invalidform=1; } else { document.getelementbyid('txtdob').classname = "defaultstyle"; document.getelementbyid('errdob').innerhtml =""; } if (email =="") { document.getelementbyid('txtemail').classname = "errorstyle"; document.getelementbyid('erremail').innerhtml = "must enter email"; invalidform=1; } else if (atpos<1 || dotpos<atpos || dotpos+2 == email.length) { document.getelementbyid('txtemail').classname ="errorstyle"; document.getelementbyid('erremail').innerhtml ="must enter valid email"; invalidform=1; } else { document.getelementbyid('txtemail').classname ="defaultstyle"; document.getelementbyid('erremail').innerhtml = ""; } if (feedback == "") { document.getelementbyid('txtfeedback').classname = "errorstyle"; document.getelementbyid('errfeedback').innerhtml = "must enter feedback"; invalidform=1; } else if (feedback.length > 1000) { document.getelementbyid('txtfeedback').classname = "errorstyle"; document.getelementbyid('errfeedback').innerhtml = "must enter feedback not exceed 200 characters"; invalidform=1; } else { document.getelementbyid('txtfeedback').classname ="defaultstyle"; document.getelementbyid('errfeedback').innerhtml = ""; } if (invalidform ==0) { alert("your information has been entered valid , ready send, click submit button so."); } }<form id="myform" action="mailto:dcrummey@belfastmet.ac.uk; pauldocherty@belfastmet.ac.uk?subject=belfast%20met%20sights%20and%20sounds%20feedback" method="post" enctype="text/plain"> <fieldset style="width:85%; margin:auto;"> <legend>your details</legend> <img src="../images/submit-query.gif" width="30%" alt="submit images" style="display:block; float:right; padding-right:20px;"/> <p class="mytext">title: <select name="title " id="txttitle"> <option value=" mr">mr</option> <option value=" mrs">mrs</option> <option value=" ms">ms</option> <option value=" miss">miss</option> <option value=" dr">dr</option> <option value=" prof">prof</option> </select> <span class="errspan" id="errtitle"></span> </p> <p class="mytext">first name: <input name="first name " type="text" id="txtfirstname" /> <span class="errspan" id="errfirstname"></span> </p> <p class="mytext">last name: <input name="last name " type="text" id="txtlastname" /> <span class="errspan" id="errlastname"></span> </p> <p class="mytext">gender: <select name="gender " id="txtgender"> <option value=" male">male</option> <option value=" female">female</option> </select> </p> <p class="mytext">dob: <input name="dob "type="text" id="txtdob" /> <span class="errspan" id="errdob"></span> </p> <p class="mytext">email address: <input name="email address " type="text" id="txtemail" /> <span class="errspan" id="erremail"></span> </p> </fieldset> <br /> <fieldset style="width:85%; margin:auto;"> <legend class="text">your feedback</legend> <p class="mytext">feedback type: <select name="feedback type " id="txtfeedbacktype"> <option value=" general feedback">general feedback</option> <option value=" query">query</option> <option value=" suggestion">suggestion</option> <option value=" other(please specify below)">other (please specify below)</option> </select> <span class="errspan" id="errfeedbacktype"></span> </p> <p class="mytext">feedback: <textarea class="mytext" name="feedback" cols="30" rows="5" id="txtfeedback"></textarea> <span class="errspan" id="errfeedback"></span> </p> </fieldset> <br /> <input onclick="validateform();" type="button" value="check information" /> <input type="submit" value="send feedback" /> <input type="reset" value="reset fields"/> </form>
use form's onsumbit event. return true if validated ok, else false:
<form id="myform" onsubmit="return validateform()" .... and change function to:
if (invalidform ==0) { alert("your information has been entered valid , ready send."); return true; } else { return false; } here simplified example: https://jsfiddle.net/83llcq3u/1/
Comments
Post a Comment