r/javaScriptStudyGroup • u/[deleted] • Apr 08 '16
JavaScript help
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; }
2
u/Volv Apr 08 '16 edited Apr 08 '16
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