JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<title>WebSystemsI ASsignment 3: F</title>
<body>
<p>
Please take the time to enter <strong>all</strong> of the information below. When complete, please submit the information by answering the confirmation question correctly and clicking the "Submit" button.  
</p>
<br>
<p>
The following questions pertain to your personal information:  
</p>
<form name="inputForm" method="post" action="mailto:[email protected]">
  First Name:<br>
  <input type="text" pattern="[(A-Z)(a-z)]{1,}" name="firstname" id="firstname" placeholder="Enter First Name">
  <br>
  Last Name:<br>
  <input type="text" pattern="[(A-Z)(a-z)]{1,}" name="lastname" id="lastname" placeholder="Enter Last Name">
  <br>
      Birth Date: (xx/xx/xxxx) <br>
  <input type="text" name="dob" id="dob" placeholder="mm/dd/yyyy" patter="" required>
  <br>
      Message:<br>
  <textarea rows="4" cols="50" name="sms" id="sms" form="usrform" required ></textarea>
  <br>
  <p>
  The remaining questionns pertain to your adddress & contact information.
  </p>
  <h3>Address</h3>
    House Number:<br>
  <input type="text" pattern=".{1,}" name="housenumber" id="housenumber" placeholder="23">
    <br>      
    Street:<br>
  <input type="text" pattern=".{1,}" name="street" id="street" placeholder="Oak St.">
    <br>       
    City:<br>
  <input type="text" name="city" id="city">
    <br>      
    State<br>
      <select id = "state">
        <option value="AL">AL</option>
        <option value="AK">AK</option>
        <option value="AR">AR</option>	
        <option value="AZ">AZ</option>
        <option value="CA">CA</option>
        <option value="CO">CO</option>
        <option value="CT">CT</option>
        <option value="DC">DC</option>
        <option value="DE">DE</option>
        <option value="FL">FL</option>
        <option value="GA">GA</option>
        <option value="HI">HI</option>
        <option value="IA">IA</option>	
        <option value="ID">ID</option>
        <option value="IL">IL</option>
   ...

JavaScript

function Confirm() {
 	var useranswer = document.forms["inputForm"]["confirm"].value;
  var answer = '1776';
  	if (useranswer != answer) {
    	alert("Must enter correct answer to the question.");
    	return false;
    	}
    return ValidateForm();
  }




function ValidateForm() {

var firstname = document.forms["inputForm"]["firstname"].value;    
var lastname = document.forms["inputForm"]["lastname"].value;
var dob = document.forms["inputForm"]["dob"].value;
var sms = document.getElementById("sms").value;
var housenumber = document.forms["inputForm"]["housenumber"].value;
var street = document.forms["inputForm"]["street"].value;
var city = document.forms["inputForm"]["city"].value;
var zip = document.forms["inputForm"]["zip"].value;    
var phonenumber = document.forms["inputForm"]["phonenumber"].value; var email = document.forms["inputForm"]["email"].value;

    	if (!ValidateNotBlank(firstname, "Fname"))
    return false;
    	if (!ValidateNotBlank(lastname, "Lname"))
    return false;
    	if (!ValidateNotBlank(dob, "Bday"))
    return false;
    
     	isValidDate(dob);   
    	
      if (!ValidateNotBlank(sms, "Message"))
    return false;
    	if (!ValidateNotBlank(housenumber, "House#"))
    return false;
    	if (!ValidateNotBlank(street, "HouseStreet"))
    return false;
    	if (!ValidateNotBlank(city, "City"))
    return false;
    	if (!ValidateNotBlank(zip, "Zipcode"))
    return false;
    	if (!ValidateNotBlank(phonenumber, "Phone#"))
    return false;
    	if (!ValidateNotBlank(email, "Email"))
    return false;
    
  
   userouput();
	}

 
 function ValidateNotBlank(val, message) {
  	if (val == null || val == "")
    	{
    	alert("Must enter a value for: " + message);
    	return false;
    	}
    return true;
  }
 


function isValidDate(dob){
  var d = dob;
  var d_as_date = Date.parse(d);
  var today = new Date();
  var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

var y = Math.round(d /...