Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    how to stop data going to email before validation completed

    I finally have the data going to an email, using HTML. It works in I
    E and Chrome. There is one problem. All the validations are working except when they choose an Adult book and they are under 18 An error message comes up but if Submit is clicked it still goes to the email. I need the cursor to go back to and Choose a Childrens Book.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Form validation MUST be done on the server. JavaScript validation is just for the convenience of those filling out the form so that if they have JavaScript enabled they don't have to fill out the whole form and submit it before being told they filled it out wrong.

    The server side script attached to the action attribute of your form tag is what will determine whether the form has been filled out correctly or not.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Yup I made this error a year ago where I only validated my form with JS. Definitely use a server-side language like PHP as you know it will always validate, regards of what the user tries to do (i.e they can't switch off PHP)

    Can you post your form code please?

    Regards,

    LC.

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to stop data going to email before validation completed - only using html in this

    Quote Originally Posted by LearningCoder View Post
    Yup I made this error a year ago where I only validated my form with JS. Definitely use a server-side language like PHP as you know it will always validate, regards of what the user tries to do (i.e they can't switch off PHP)

    Can you post your form code please?

    Regards,

    LC.
    Thank you for your reply. I haven't learnt PHP yet and my computer is not set up to take it. I am going to learn it next year. This is all I have to do for this exercise, but I would like to get the validation, when it comes up with an error to say that the person is not old enough to purchase Adult Books for the cursor to return to the Subject input box. That is choose Childrens Books.
    At the moment when submit is clicked it goes to to the email regardless.

    I would appreciate any other suggestions - it is supposed to be a simple exercise. The other thing is, in the footer I need to have the full day and the the rest of the date coming up when the program was last updated. At the moment I have the day and the date with (for example) Monday Mon 10 December 2012 coming up with the date.

    <code>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <title>home</title>
    <link href="mystyles.css" rel="stylesheet" type="text/css"/>



    <script type="text/javascript" language="javascript" src="date_time.js" </script>


    function bigImg(x)
    {
    x.style.height="64px";
    x.style.width="64px";
    }

    function normalImg(x)
    {
    x.style.height="32px";
    x.style.width="32px";
    }
    </script>



    <script>

    function validateForm(){

    var x = document.forms["myForm"]["lastname"].value;
    x = x.replace(/^\s+/,""); // strip leading spaces
    x1 = x.replace(/[^a-z]/gi,""); // strip non-alpha chars
    if ((/[^a-z\s&'-\.]/gi.test(x)) || (x.length == 0) || (x1.length < 2)) {
    alert ("Last name must be filled out - only alpha characters (2 minimum), space, apostrophe, hyphen, full stop and & are valid in this field");
    myForm.lastname.focus();
    return false;
    }

    var x = document.forms["myForm"]["firstname"].value;
    x = x.replace(/^\s+/,""); // strip leading spaces
    x1 = x.replace(/[^a-z]/gi,""); // strip non-alpha chars
    if ((/[^a-z\s&'-\.]/gi.test(x)) || (x.length == 0) || (x1.length < 2)) {
    alert ("First name must be filled out - only alpha characters (2 minimum), space, apostrophe, hyphen, full stop and & are valid in this field");
    myForm.firstname.focus();
    return false;
    }

    var x=document.forms["myForm"]["address"].value
    if (x==null || x==""){
    alert("Address must be filled out");
    myForm.address.focus();
    return false;
    }

    var x=document.forms["myForm"]["suburb"].value
    if (x==null || x==""){
    alert("Suburb must be filled out");
    myForm.suburb.focus();
    return false;
    }


    var x=document.forms["myForm"]["state"].value

    if(x=="") {alert ( "Please select your State." );
    myForm.state.focus();
    return false;
    }


    var x=document.forms["myForm"]["postcode"].value
    if (x==null || x==""){
    alert("Postcode must be filled out")
    myForm.postcode.focus();
    return false;
    }

    if (!IsNumeric(x)){
    alert("Please enter only numbers in the Postcode field")
    return false;
    }


    var x=document.forms["myForm"]["cphone"].value
    if (x==null || x=="") {
    alert("Contact Phone must be filled out")
    myForm.cphone.focus();
    return false;
    }

    if (!IsNumeric(x)) {
    alert("Please enter only numbers in the Contact Phone field")
    myForm.cphone.focus();
    return false;
    }


    var x=document.forms["myForm"]["email"].value
    if (x==null || x==""){
    alert("Email must be filled out");
    myForm.email.focus();
    return false;
    } else {
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("Not a valid e-mail address");
    myForm.email.focus();
    return false;
    }
    }

    var x=document.forms["myForm"]["subject"].value
    if (x==null || x==""){
    alert("Please select an interest");
    myForm.subject.focus();
    return false;
    }

    var x=document.forms["myForm"]["field"].value
    if (x==null || x==""){
    alert("Please fill out your Date of Birth in the requested format")
    myForm.field.focus();
    return false;
    }

    if (!ageCount()){
    alert("Please fill out your Date of Birth in the requested format")
    myForm.field.focus();
    return false;
    }




    return true;

    }

    </script>
    <script>
    function check_date(field)
    {
    var checkstr = "0123456789";
    var DateField = field;
    var Datevalue = "";
    var DateTemp = "";
    var seperator = "/";
    var day;
    var month;
    var year;
    var leap = 0;
    var err = 0;
    var i;

    var retValue = true;

    err = 0;
    DateValue = DateField//.value;


    /* Delete all chars except 0..9 */
    for (i = 0; i < DateValue.length; i++) {
    if (checkstr.indexOf(DateValue.substr(i,1)) >= 0) {
    DateTemp = DateTemp + DateValue.substr(i,1);
    }
    }
    DateValue = DateTemp;
    /* Always change date to 8 digits - string*/
    /* if year is entered as 2-digit / always assume 20xx */


    if (DateValue.length == 6) {
    DateValue = DateValue.substr(0,4) + '20' + DateValue.substr(4,2); }
    if (DateValue.length != 8) {
    err = 19;}
    /* year is wrong if year = 0000 */
    year = DateValue.substr(4,4);
    if (year == 0) {
    err = 20;
    }
    /* Validation of month*/
    month = DateValue.substr(2,2);
    if ((month < 1) || (month > 12)) {
    err = 21;
    }
    /* Validation of day*/
    day = DateValue.substr(0,2);
    if (day < 1) {
    err = 22;
    }
    /* Validation leap-year / february / day */
    if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0)) {
    leap = 1;
    }
    if ((month == 2) && (leap == 1) && (day > 29)) {
    err = 23;
    }
    if ((month == 2) && (leap != 1) && (day > 28)) {
    err = 24;
    }
    /* Validation of other months */
    if ((day > 31) && ((month == "01") || (month == "03") || (month == "05") || (month == "07") || (month == "08") || (month == "10") || (month == "12"))) {
    err = 25;
    }
    if ((day > 30) && ((month == "04") || (month == "06") || (month == "09") || (month == "11"))) {
    err = 26;
    }
    /* if 00 ist entered, no error, deleting the entry */
    if ((day == 0) && (month == 0) && (year == 00)) {
    err = 0; day = ""; month = ""; year = ""; seperator = "";
    }
    /* if no error, write the completed date to Input-Field (e.g. 13.12.2001) */
    if (err == 0) {
    DateField.value = day + seperator + month + seperator + year;
    }
    /* Error-message if err != 0 */
    else {
    alert("Date is incorrect!");
    //DateField.select();
    //DateField.focus();
    retValue= false;
    }

    return retValue;

    }

    </script>

    <script>
    function ageCount() {
    var field=document.forms["myForm"] ["field"].value
    if (check_date(field)==false){return false};
    var date1 = new Date();
    var dob= document.getElementById("field").value;
    var date2=new Date(dob);
    var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/; //Regex to validate date format (dd/mm/yyyy)
    if (pattern.test(dob)) {
    var y1 = date1.getFullYear(); //getting current year
    var y2 = date2.getFullYear(); //getting dob year
    var age = y1 - y2; //calculating age

    var selected=document.getElementById("myForm").subject.value;

    if
    (age < 18 && selected == "ABooks") {
    alert('Your age is under 18 and you have ordered an Adult Book. Sorry you are not able to purchase Adult Books. Please choose Childrens Books');
    }

    alert("Age : " + age);

    return true;

    } else {
    alert("Invalid date format. Please Input in (dd/mm/yyyy) format!");
    return false;
    }

    }


    </script>

    <script>
    function IsNumeric(sText){
    var ValidChars = "0123456789.";
    var IsNumber=true;
    var Char;

    for (i = 0; i < sText.length && IsNumber == true; i++){
    Char = sText.charAt(i);
    if (ValidChars.indexOf(Char) == -1){
    IsNumber = false;
    }
    }
    return IsNumber;
    }

    </script>
    <!--
    Limit the number of characters per textarea

    function textCounter(field,cntfield,maxlimit) {
    if (field.value.length > maxlimit){// if too long...trim it!
    field.value = field.value.substring(0, maxlimit);
    }else{
    // otherwise, update 'characters left' counter
    cntfield.value = maxlimit - field.value.length;
    }
    }

    </SCRIPT>

    <script>
    function getVal() {
    var val = document.getElementById("subject").value;
    var emadd = "hmpk@spin.net.au";
    if (val !=0) {
    emadd = emadd +"?subject=" + val;
    alert (emadd);
    }
    }

    -->





    </head>

    <body onload="SetFocus()">




    <p>
    Today is: &nbsp;&nbsp;
    <span id="date_time"></span>
    <script type="text/javascript">window.onload = date_time('date_time');</script>
    <script>
    var d = new Date()
    var time = d.getHours()
    if (time < 12)
    {
    document.write ( "&nbsp;&nbsp; Good Morning")
    }
    else
    {
    if (time == 12)
    {
    document.write ( "&nbsp;&nbsp; It is noon. Good Day")
    }
    else
    {
    if (time >12)
    {
    document.write ( "&nbsp;&nbsp; Good afternoon")

    }
    }
    }

    </script>
    <p>
    <p>


    <script>
    function gatherBody(){


    var f = document.forms["myForm"]["lastname"].value;
    var s = document.forms["myForm"]["firstname"].value;
    var a = document.forms["myForm"]["address"].value;
    var t = document.forms["myForm"]["suburb"].value;

    var st = document.forms["myForm"]["state"].value;
    var pc = document.forms["myForm"]["postcode"].value;
    var p = document.forms["myForm"]["cphone"].value;
    var e = document.forms["myForm"]["email"].value;
    var dob = document.forms["myForm"]["field"].value;

    var d = document.forms["myForm"]["comments"].value;

    var gB = "Custumer_Enquiry_Details"+"\n"+"---------------------------------------------------------------"+"\n"+"Last_Name:"+f+"\n"+"First_name:"+s+"\n"+"Address:"+a+"\n"+"Suburb:"+t+"\n"+"State:"+st+"\n"+ "Postcode:"+pc+"\n"+"Contact_Phone:"+p+"\n"+"Email:"+e+"\n"+"Date_of_Birth:"+dob+"\n"+"Comments:"+d+ "\n"+"---------------------------------------------------------------"+"\n";
    document.forms["myForm"]["body"].value=gB;


    }

    </script>



    <script type="text/javascript">

    function sub() {

    if(validateForm()) {
    gatherBody();
    return true;
    }
    return false;
    }
    </script>

    </script>


    <table width="100%" border="4" class="headerborder" id="styling">
    <!--This table depicts the graphics and Logo for Helen's Website-->
    <tr>

    <th width="15%"><div align="left"><img src="images/sittingatdesk.jpg" width="300" height="300">

    <th width="85%" width-"100%"> <div align="center">

    <p>
    <h1 onmouseover="style.color='red'"
    onmouseout="style.color='black'">
    HELEN'S WEBSITE</h1>


    <a href="" onMouseOver="document.MyImage.src='images/HOLLAND 2012.jpg';"
    onMouseOut="document.MyImage.src='images/seaside1.jpg';"</a>

    <img src="images/seaside1.jpg" name="MyImage" width="500" height="200">


    </th>
    </tr>
    </table>

    <form id="myForm" method="get" enctype="text/plain" action="mailto:books@books.com.au" onSubmit="return sub()">


    <table width="100%" cellspacing="10" cellpadding="1">
    <TBODY>

    <tr>
    <td colspan="2" align="center"><strong>APPLICATION/ENQUIRY FORM </strong></td></tr>




    <tr>

    <td colspan="2" align="center"><strong>Personal Details:</strong></td>
    </tr>
    <tr>
    <td align="right"><strong>* Last Name</strong></td>
    <td><input name="lastname" type="text" id="lastname" value=""></td>
    <td> <input type="hidden" id="body" name="body"/> </td>
    </tr>
    <tr>
    <td align="right"><strong>* First Name</strong></td>
    <td><input name="firstname" type="text" id="firstname" value=""></td>
    </tr>
    <tr>
    <td align="right"><strong>* Address</strong></td>
    <td><input name="address" type="text" id="address" value=""></td>
    </tr>
    <tr>
    <td align="right"><strong>* Suburb</strong></td>
    <td><input name="town" type="text" id="suburb" value =""></td>
    </tr>
    <tr>
    <td align="right"><strong>* State</strong></td>
    <td><select name="state">
    <option value="" selected></option>
    <option value="NSW">NSW</option>
    <option value="QLD">QLD</option>
    <option value="ACT">ACT</option>
    <option value="VIC">VIC</option>
    <option value="WA">WA</option>
    <option value="SA">SA</option>
    <option value="NT">NT</option>
    <option value="TAS">TAS</option>
    </select></td>
    </tr>
    <tr>
    <td align="right"><strong>* Postcode</strong></td>
    <td><input name="postcode" type="text" id="postcode" value ="" ></td>
    </tr>

    <tr>
    <td align="right"><strong>* Contact Phone</strong ></td>
    <td><input name="cphone" type="text" id="cphone" value = ""></td>
    </tr>

    <tr>
    <td align="right"><strong>* Email</strong></td>
    <td><input name="email" type="text" id="email" size="35" maxlength="35" value=""></td>
    </tr>

    <tr>
    <td align="right"><strong>* Please select your area of interest:</strong></td>

    <td colspan="20" align="left">
    <select name="subject" id="subject">
    <option value=""selected></option>
    <option value="CBooks">Books for Children</option>
    <option value="ABooks">Books for Adults</option>

    </select></td></tr>


    <p>
    <tr>
    <td align="right"><strong>* Please enter your date of birth: </strong>


    <td><h6>Insert your date of birth in format dd/mm/yyyy&nbsp;&nbsp; <br>
    <input id="field" type="text" value="" name="field" maxlength="10" size="15"></h6></td>


    </td>
    </tr>



    <tr>
    <td align="right" valign="top"><strong>Comments</strong><br></td>



    <td><textarea name="comments" cols="45" rows="10" id="comments" lengthcut="true" onKeyDown="textCounter(document.myForm.comments,document.myForm.remLen1,150)" onKeyUp="textCounter(document.myForm.comments,document.myForm.remLen1,150)"></textarea></td>
    </tr>






    <tr>
    <td colspan="2" align=center>
    <input type="submit" id="submit" name="submit" value="SUBMIT"/>
    <p> <input onclick="formreset()" value="Reset" type="reset"></p> </td>
    </tr>
    </TBODY>
    </table>
    <p></p>
    </form>


    <p>
    <hr align="JUSTIFY" />
    <p class="footer" align="center">

    <script type="text/javascript">

    var nVer = navigator.appVersion;
    var nAgt = navigator.userAgent;
    var browserName = navigator.appName;
    var fullVersion = ''+parseFloat(navigator.appVersion);
    var majorVersion = parseInt(navigator.appVersion,10);
    var nameOffset,verOffset,ix;

    // In Opera, the true version is after "Opera" or after "Version"
    if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
    browserName = "Opera";
    fullVersion = nAgt.substring(verOffset+6);
    if ((verOffset=nAgt.indexOf("Version"))!=-1)
    fullVersion = nAgt.substring(verOffset+8);
    }
    // In MSIE, the true version is after "MSIE" in userAgent
    else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
    browserName = "Microsoft Internet Explorer";
    fullVersion = nAgt.substring(verOffset+5);
    }
    // In Chrome, the true version is after "Chrome"
    else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
    browserName = "Chrome";
    fullVersion = nAgt.substring(verOffset+7);
    }
    // In Safari, the true version is after "Safari" or after "Version"
    else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
    browserName = "Safari";
    fullVersion = nAgt.substring(verOffset+7);
    if ((verOffset=nAgt.indexOf("Version"))!=-1)
    fullVersion = nAgt.substring(verOffset+8);
    }
    // In Firefox, the true version is after "Firefox"
    else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
    browserName = "Firefox";
    fullVersion = nAgt.substring(verOffset+8);
    }
    // In most other browsers, "name/version" is at the end of userAgent
    else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
    (verOffset=nAgt.lastIndexOf('/')) )
    {
    browserName = nAgt.substring(nameOffset,verOffset);
    fullVersion = nAgt.substring(verOffset+1);
    if (browserName.toLowerCase()==browserName.toUpperCase()) {
    browserName = navigator.appName;
    }
    }
    // trim the fullVersion string at semicolon/space if present
    if ((ix=fullVersion.indexOf(";"))!=-1)
    fullVersion=fullVersion.substring(0,ix);
    if ((ix=fullVersion.indexOf(" "))!=-1)
    fullVersion=fullVersion.substring(0,ix);

    majorVersion = parseInt(''+fullVersion,10);
    if (isNaN(majorVersion)) {
    fullVersion = ''+parseFloat(navigator.appVersion);
    majorVersion = parseInt(navigator.appVersion,10);
    }

    document.write(''
    +'Browser name = You are using: '+browserName+'<br>'
    +'Full version = '+fullVersion+'<br>'
    +'Major version = '+majorVersion+'<br>'

    )
    </SCRIPT>

    <p>

    <script
    type="text/JavaScript"
    language="JavaScript">
    <!--
    //
    // format date as dd-mmm-yy
    // example: 12-Jan-99
    //
    function date_ddmmmyy(date)
    {
    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getYear();

    // handle different year values
    // returned by IE and NS in
    // the year 2000.
    if(y >= 2000)
    {
    y -= 2000;
    }
    if(y >= 100)
    {
    y -= 100;
    }

    // could use splitString() here
    // but the following method is
    // more compatible
    var mmm =
    ( 1==m)?'Jan' 2==m)?'Feb'3==m)?'Mar':
    ( 4==m)?'Apr' 5==m)?'May'6==m)?'Jun':
    ( 7==m)?'Jul' 8==m)?'Aug'9==m)?'Sep':
    (10==m)?'Oct'11==m)?'Nov':'Dec';


    return "" +
    (d<10?"0"+d:d) + "-" +
    mmm + "-" +
    (y<10?"0"+y:y);
    }


    //
    // get last modified date of the
    // current document.
    //
    function date_lastmodified()
    {


    var weekday=new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";



    var lmd = document.lastModified;
    var lastDate = new Date(lmd);

    return weekday[lastDate.getDay()] + " " + lastDate;

    }

    //
    // finally display the last modified date
    // as DD-MMM-YY
    //
    document.write(
    "This page was updated on " +
    date_lastmodified() );

    // -->
    </script>





    <p>&nbsp;</p>

    <p>&nbsp;</p>


    <p>&nbsp;</p>
    <p></p>
    <p></p>
    <hr align="JUSTIFY" />
    <p align="center" class="footer">

    <hr>

    <p class="footer" align="center">Copyright © - Website created by Kaye Company</p>


    <script type="text/javascript" language="JavaScript">
    document.forms['myForm'].elements['lastname'].focus()

    </script>







    </body>
    </html>


    </code>

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    1. You should put code inside [ code ] tags - the # button above the textarea will do this for you.

    2. Any JavaScript validation is trivial to bypass - which is why you need server side validation as well.

    3. The code you have there looks like most of it is intended for the long dead Internet Explorer 4 and Netscape 4 browsers. See http://javascriptexample.net/domform15.php for an example of a modern form field validation where all you need to do is to specify the field validations you want at the top (the example defines nam and email validatios) and replicate the addEvent calls at the bottom to reference all of your form fields that you specified the validations for at the top.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ElizaKaye (12-08-2012)

  • #6
    New Coder
    Join Date
    Nov 2012
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you very much for your suggestions. I tried the sample form but it didn't work.

    I haven't learnt that way of coding yet and for this exercise all I need to do is try and get the code to return to the subject box if they are too young to purchase an adult book.

    I am going to concentrat more next year on updating my coding to html5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •