JavaScript help

[u/[deleted]]

I am trying to create a order form and validate it with JavaScript. Nothing happens when I hit the submit button. It is like the js page isnt communicating with the html. Any suggestions?

  <form id="orderForm" action="" onsubmit="validateContactForm()">
        <fieldset>
          <legend>Customer Information</legend>		
		  <table summary="Customer Information">
		    <tr>
              <td><label for="firstName">First name:</label></td>
			  <td><input type="text" name="firstName"/></td>
              <td><label for="lastName">Last name:   </label></td>              
			   <td><input type="text" name="lastName"/></td>
 			</tr>  
			 <tr>
			  <td><label for="email">E-mail address:</label></td>
			  <td><input id="email" type="text" name="email"/></td>
			  <td><label for="socialSecurityNumber">Social Security Number: </label>
			  <td><input type=" submit" name="submit" value=""/></td>
			 </tr>
            <tr>
			  <td><label for="address">Address:</label></td>
			  <td><input id="address" type="textarea" name="address"/></td>
			  <td><label for="city">City:</label></td>
			  <td><input id="city"type="text" name="city"/></td>
			 </tr>
 			<tr>
			  <td><label for="state">State:</label></td>
			  <td><input id="state" type="text" name="state"/></td>
			  <td><label for="zipCode">Zip Code:</label></td>
			  <td><input id="zipCode" type="text" name="zipCode"/></td>
			 </tr>  
          </table>
        </fieldset>
		 <fieldset>
		  <legend>Products</legend>
		  <table summary="products">
		    <tr>
			  <td><label for="products">Select Product:</label></td>
			  <td><select>
		            <option id="" name="Noob">Noob</option>
                    <option id=""name="Level-2">Level 2</option>
                    <option id="" name="Level-3">Level 3</option>
                    <option id="" name="Level-4">Level 4</option>
                    <option id="" name="Level-5">Level 5</option>
                  </select></td>
			</tr>
            <tr>
			  <td><label for="quantity">Quantity (between 1 and 5):</label></td>
              <td><input type="number" name="quantity" min="1" max="5"/></td>
          </table>
	    </fieldset>
		<fieldset>
		  <legend>Complete Order</legend>
		  <table summary="Complete Order">
		   <tr>
		    <td><input type="submit" value="Enter Order"/></td>
			<td align="right"><input type="reset" value="Reset Form"/></td>
		   </tr>
		 </table>
   		</fieldset> 

//orders.js

function validateContactForm() { var orderFormObj = document.getElementById("orderForm"); var firstName = orderFormObj.firstName.value; var lastName = orderFormObj.lastName.value; var email = orderFormObj.email.value; var socialSecurityNumber = orderFormObj.socialSecurityNumber.value; var address = orderFormObj.address.value; var city = orderFormObj.city.value; var state = orderFormObj.state.value; var zipCode = orderFormObj.zipCode.value; var everythingOK = true;

if (!validateName(firstName))
{
 alert("Error: Invalid First Name.");
 everythingOK = false;

}
if (!validateName(lastName))
{
    alert("Error: Invalid last name.");
    everythingOK = false;
}

if (!validateSSN(socialSecurityNumber))
{
    alert("Error: Invalid Social number.");
    everythingOK = false;
}

if (!validateEmail(email))
{
    alert("Error: Invalid e-mail address.");
    everythingOK = false;
}

if (everythingOK)
{
    alert("All the information looks good.\nThank you!");
    return true;
}
else
    return false;

} function validateName(name) { var p = name.search(/^{[-'\w\s]+$/);} if (p == 0) return true; else return false; }

function validatePhone(phone) { var p1 = phone.search(/^{\d{3}[-\s]{0,1}\d{3}[-\s]{0,1}\d{4}$/);} var p2 = phone.search(/^{\d{3}[-\s]{0,1}\d{4}$/);} if (p1 == 0 || p2 == 0) return true; else return false; }

function validateEmail(address) { var p = address.search(/^{\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})$/);} if (p == 0) return true; else return false; }

[u/Volv]

You didn't actually have a socialSecurityNumber field
I replaced
<td><input type=" submit" name="submit" value=""/></td>
with

<td><input id="socialSecurityNumber" type="text" name="socialSecurityNumber"/></td>
 
And it almost worked.
You also don't have a validateSSN function so I made an empty one. Seems to work now.
You don't need all those name attributes btw. Or the trailing slashes.
Codepen

[u/[deleted] → u/Volv]

Thank you so much, I will try it again. I'm very new to javascript.

[u/Volv → u/[deleted]]

No problem. Feel free to chase us up if you need any more help