Post
Ask Question
RunDown BassMan

RunDown BassMan

  • NA
  • 22
  • 28.5k

Form validation and sending email with HTML5 and Javascript

Aug 21 2014 8:52 AM

Hi, I'm having issues creating form validators with javascript. At the moment, I have a main control function called validateAllEmpty(). This is used in the form using onsubmit. Then I have other small functions to test if email is valid, and to test if a field is empty or not. I'm using another function called send() that collects all the data from the fields and sends them via email to another user. The problem is, when I go press submit, its running the validators, but still sending the email regardless of the validators decision. Any ideas?

code -
 
 <!doctype html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="requestForm.css">
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <title>Guest WIFI request form</title>
</head>
<body>
<h1 align="center">Guest WIFI request</h1>
<h2 align="center">Please enter the details below to create a Guest WIFI login:</h2>
<FORM name="myForm"  METHOD="post" enctype="text/plain" onsubmit="return validateAllEmpty()">
<table align="center">
<tr><td>Full Name</a></td><td>  <input type="text" name="Fname" id="Fname" maxlength="50" size="50" ></td></tr>
<tr><td>Company</a></td><td>  <input type="text" name="Company" id="company" maxlength="100" size="50" ></td></tr>
<tr><td>Email Address</a></td><td>  <input type="text" name="Email Address" id="email" maxlength="100" size="50" ></td></tr>
<script>
function validateAllEmpty()
{
    var Fname = document.getElementById("Fname"); <!-- navigate up the DOM tree to find the user input boxes by their id's -->
 var company = document.getElementById("company");
 var email = document.getElementById("email");
 
    if (Fname.value.length == 0 && company.value.length == 0 && email.value.length == 0) <!-- if statement to test if the boxes lengh are equal to 0 -->
 {
        Fname.style.background = 'Yellow'; <!-- change the background color of the text boxes to help the user see which boxes they left empty -->
  company.style.background = 'Yellow';
  email.style.background = 'Yellow';
        alert("You must enter values!"); <!-- pop up a message box to inform the user that they have left the boxes empty --> <!-- reload the page -->
  return false;
    }
 if (validateEmail())
 {
  return false;
 }
 if (validateEmpty("Fname"))
 {
  return false;
 }
 if (validateEmpty("company"))
 {
  return false;
 }
 if (validateEmpty("email"))
 {
  return false;
 }
 if (!validateEmpty("Fname") && !validateEmpty("company") && !validateEmpty("email"))
 {
  send();
 }
}
var field
function validateEmpty(field)
{
 var fieldname = document.getElementById(field);
 if (fieldname.value.length == 0)
 {
  fieldname.style.background = 'Yellow';
  alert("You must enter a value for " + field);
 }
}
function validateEmail() {
     var x = document.forms["myForm"]["email"].value;
     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");
     }
 }
function send() {
    var link = 'mailto:[email protected]?subject= Guest WIFI request'
             +'&body=A request for guest WIFI access was made. Details:- %0D%0A'
    +'%0D%0A Name: '+document.getElementById('Fname').value +
    '%0D%0A Company: '+document.getElementById('company').value +
    '%0D%0A Email: '+document.getElementById('email').value;
    window.location.href = link;
 }
</script>
<tr><td>
<Input type="Submit" value="Request">
</td></tr>
</table>
</form>
</body>
</html>

Answers (1)