HTML Validation JS without using PHP

Question

I made an application for people to fill out an application. I did some of the in form validation but now I want to ensure that when the user hits the submit button it checks to ensure that all field are filled out. I am stuck and cannot figure out the last part of this puzzle.

I believe all I need to make this work is a Application.js If someone could take a look at this and let me know what if anything I am missing. I did not include the CSS sheet or photos. Thank you for taking the time to help.

Here is the form. "Application.html"

    <!DOCTYPE html>
    <html> 

    <head>
<center><h1>AIFC Application Form</h1></center>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>     
<title>AIFC Application</title>
<meta charset="utf-8">
<meta name="author" content="Paul Skinner">
<link rel="stylesheet" type="text/css" href="Application.css" />
<style type="text/css">



</style>

<script src="Application.js"></script>
<script src="Application_Library.js"></script>
<script type="text/javascript">

function updateTotal() {

    var basePrice = 50;
    var optionsPrice = 0;
    var memberPrice = 0;

    function checkPayment() {
        if (document.getElementById('payment0').checked) {

            optionsPrice += 1;
        }

        if (document.getElementById('payment1').checked) {

            optionsPrice += 9.6;
        }


    } // end of checking for payment

    function checkJumper() {
        if (document.getElementById('jumper0').checked) {

            optionsPrice += 0;
        }

        if (document.getElementById('jumper1').checked) {

            optionsPrice += 4.4;
        }


    } // end of checking for Jumper

    function checkMembership() {

        if (document.getElementById('membership').value == 'Basic') {
            memberPrice += 75;
        }

        if (document.getElementById('membership').value == 'Silver') {
            memberPrice += 125;
        }

        if (document.getElementById('membership').value == 'Gold') {
            memberPrice += 150;
        }

    } // end of check membership function

    checkPayment();
    checkJumper();
    checkMembership();


    var totalPrice = basePrice + (optionsPrice * memberPrice);
    document.getElementById('optionsPrice').innerHTML = optionsPrice;
    document.getElementById('memberPrice').innerHTML = "$ " + memberPrice;
    document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;

}
</script>

</head>
<body>
<div id="top">
     <nav class="horizontalNav">
       <ul>

           <li><a href="fitness.html">Home</a></li>
           <li><a href="application.html">Application</a></li>
           <li><a href="WhoWeAre.html">Who We Are</a></li>
           <li><a href="Pricing.html">Our Packages</a></li>
        </ul>   

    </nav></div>
<section>
    <table>
        <tr style="white-space:nowrap; clear:both">
<td><img src="Images/girl punching.jpg" alt="Girl Punching" style=" float:left; height:200px" /></td>
<td><img src="images/fitness.jpg" alt="Weights" style=" float:right; height:200px; width:900px" /></td>
        </tr>
     </table>
 </section>

<form action="#" method="get" name="application" id="application" >
<div id="form">
<fieldset>
<legend>Payment Type</legend><br>
<input type="radio" name="payment" id="payment0" value="payment0" onchange="updateTotal()"> Monthly membership <br> 
<input type="radio" name="payment" id="payment1" value="payment1" onchange="updateTotal()"> Yearly membership <b>Big Savings!</b> <br><br>

</fieldset>
<fieldset>
<legend>Choose a Location</legend><br>
<input type="radio" name="jumper" id="jumper0" value="jumper0" onchange="updateTotal()"> Single Gym location
<input type="radio" name="jumper" id="jumper1" value="jumper1" onchange="updateTotal()"> All Locations <br><br>

</fieldset>
<fieldset>
<legend>Membership Type</legend><br>
<select name="membership" id="membership" onchange="updateTotal()">
    <option value="Basic">Basic Membership ($75)</option>
    <option value="Silver">Silver Membership ($125)</option>
    <option value="Gold">Gold Membership ($150)</option><br>
</select>
</fieldset>
<fieldset>
<legend>Sex</legend><br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
</fieldset>

</div>

<div id="prices">
<table>
<tr><td>Membership Application Fee</td><td id="basePrice">$50</td></tr>
<tr><td>Option factor</td><td id="optionsPrice"></td></tr>
<tr><td>Membership</td><td id="memberPrice"></td></tr>
<tr><td>Total</td><td id="totalPrice"></td></tr>
</table>
</div>

<div id="info">

<fieldset>
<legend>Personal Information</legend>
  <label for="first_name">First Name:</label>
  <input type="text" id="firstname" name="first" required autofocus title="First Name" placeholder="First Name" />
  <span id="first_name_error">&nbsp;</span><br>
  <label for="last_name">Last Name:</label>
  <input type="text" id="lastname" name="last" required title="Last Name" placeholder="Last Name"/>
  <span id="last_name_error">&nbsp;</span><br>

<label for="address">Address:</label>
  <input type="text" id="address" name="address" required title="Address" placeholder="Address"/>
<span id="address_error">&nbsp;</span><br>
  <label for="city">City:</label>
  <input type="text" id="city" name="city" required title="City" placeholder="City"/>
  <span id="city_error">&nbsp;</span><br>
  <label for="state">State:</label>
  <input type="text" id="state" maxlength="2"  name="State" required title="State" placeholder="State"/>
<span id="state_error">&nbsp;</span><br>
  <label for="zip_code">Zip Code:</label>
  <input type="text" id="zip" name="zip" required title="Zip Code" placeholder="Zip Code" pattern="\d{5}([\-]\d{4})?"/>
<span id="zip_error">&nbsp;</span><br>
  <label for="phone_number">Phone Number:</label>
  <input type="text" id="phone" name="phone" required title="Optional Phone Number 999-999-9999" placeholder="999-999-9999" pattern="\d{3}[\-]\d{3}[\-]\d{4}"/>
<span id="phone_error">&nbsp;</span><br>
  <label for="date_of_birth">Date of Birth:</label>
  <input type="date" name="date" required title="MM-DD-YYYY"/>
<span id="date_error">&nbsp;</span><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required title="Email" placeholder="Email Address"/>
    <span id="email_error">&nbsp;</span>
<br>



</fieldset>
<br><br><center><input type="submit" id="submit" value="Become a Member"></center>
    <br><center><input type="Reset" id="btn1" value="Reset Form"></center>
</div>
<br><br><div class="footer">
    <address><center>
    <b>American InterContinental Fitness Center</b> &nbsp; &#9728;
    1578 Perseverance Lane &nbsp; &#9728; &nbsp;
    Simple City, IL 60001
    &nbsp; <br/>&nbsp;(630)432-1425
    </address></center>
<br>

</div>
</form>

</body>
</html>

The next is the js: "Application_Library.js"

var $ = function (id) { return document.getElementById(id); }

var application = function () {
// All the different fields
this.field = [];
this.field["first_name"] = {};
this.field["last_name"] = {};
this.field["address"] = {};
this.field["city"] = {};
this.field["state"] = {};
this.field["zip"] = {};
this.field["phone"] = {};
this.field["date"] = {};
this.field["email"] = {};

// Field messages
this.field["state"].message = "Please use only a two letter State abbreviation.";
this.field["zip"].message = "Please use a 5 or 9 digit Zip Code";
this.field["phone"].message = "Please use 123-456-7890 format.";
this.field["email"].message = "Must be a vaild email address.";

// Error messages
this.field["email"].required = "Email is required";
this.field["confirmemail"].required = "Please confirm your email!";
this.field["confirmemail"].noMatch = "Emails do not Match!", "email";
this.field["first_name"].required = "First names are required.";
this.field["last_name"].required = "Last names are required.";
this.field["address"].required = "An Address is required";
this.field["city"].required = "A City is required";
this.field["state"].required = "A State is required";
this.field["state"].isState = "State invalid";
this.field["zip"].required = "A Zip code is required.";
this.field["zip"].isZip = "Zip code is invalid";
this.field["phone"].required = "A phone number is required";
this.field["phone"].isPhone = "The phone number is invalid";
this.field["date"].required = "Your date of birth is required";
}

Take a look at this stackoverflow.com/questions/7410063/… I believe is that you are looking for. As others have told you, validate at server side and keep in mind that you must never trust the client — Andres
– Andres, Commented Apr 20, 2014 at 15:42
@Andres What type of form would this be? Also a .js? I like what I read but not really familiar with the type of form (css, php, js)that it requires. — Paul Skinner
– Paul Skinner, Commented Apr 20, 2014 at 15:56
In that example you would use your application form(it is its id), it'd call a function before the form is submitted to validate it but if you do it for security purpose it is not so effective — Andres
– Andres, Commented Apr 20, 2014 at 16:18

Vishnuraj V · Accepted Answer · 2014-04-20 15:37:10Z

1

Instead of writing your own javascript validation you can use the jQuery "form Validation Plug-in", which is an excellent tool for web pages to validate data entries at the client side using JavaScript. It's very simple to use. Here is a sample tutorial
http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin

You should implement server side validation also for best security.

answered Apr 20, 2014 at 15:37

Vishnuraj V

2,8793 gold badges21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Skinner Over a year ago

How exactly does this work? I downloaded this plugin and looked at it but it makes no sense to me.

Vishnuraj V Over a year ago

check this demo and it's source :) jqueryvalidation.org/files/demo also mark the answer if it was useful

volter9 · Accepted Answer · 2014-04-20 15:43:36Z

0

You can't just check data on JavaScript, you should also check it on server-side, because the client side is more accessible and user can change the JavaScript or even disable it, so the data would be invalidated.

You should write server-side validation too.

You forgot to show the Application.js file.

Also you can use HTML5 validation, without using any JavaScript: http://www.sitepoint.com/html5-form-validation/

edited Apr 20, 2014 at 15:43

answered Apr 20, 2014 at 15:24

volter9

7356 silver badges16 bronze badges

13 Comments

lakshya_arora Over a year ago

Then he can use the noscript. Javascript was introdcued because people were sick of waiting for 30s for a validation response from server side stating that the username or email is invalid.

Paul Skinner Over a year ago

@Volter9 I do not have Application.js, that was the question I was wondering. Also I cannot use server-side right now unfortunately.

volter9 Over a year ago

@Lakshayarora how would he use the script for validation? The JavaScript is turned off, and noscript is just to display something if JavaScript is turned off.

OptimusCrime Over a year ago

@Lakshayarora Always, always check serverside too. With developer-tools it would take me about 2 seconds to remove the validation-listener on the form and submit potentially cruel content. Always check serverside just to be sure.

OptimusCrime Over a year ago

@PaulSkinner I've looked at it. You are missing the entire validation-script.

|

Collectives™ on Stack Overflow

HTML Validation JS without using PHP

2 Answers 2

2 Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related