#100DaysOfCode Day 1: Form Validation with HTML and JavaScript

I completed University of Michigan’s MOOC on JavaScript Interactivity.  The course was short and straight to the point, and I actually ended up doing 4 weeks of work in less than 3 days over Christmas break. My goal was to learn more about how to manipulate the DOM and use event handlers in vanilla JavaScript.  I’ve been using frameworks lately, so it’s a nice change to actually create my own events and methods rather than just adding a plugin or resulting to jQuery.

For the final assignment, we had to create a form and validate it using HTML5 and JavaScript.  My form takes shipping information and uses pattern regex and functions to match input field text.  This form has two simple fieldsets that takes the user’s name and zip code for both shipping and billing input.

 <form>
    <fieldset>
       <legend>Shipping Information</legend>
       <label for ="shippingName">Name:</label>
       <input type = "text" name = "Name" id = "shippingName" required><br/>
       <label for = "shippingzip">Zip code:</label>
       <input type = "text" name = "Zip" id = "shippingZip" pattern = [0-9]{5} required><br/>
   </fieldset>
      <input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
      <label for = "same">Is the Billing Information the Same?</label>
 
   <fieldset> 
     <legend>Billing Information</legend>
     <label for ="billingName">Name:</label>
     <input type = "text" name = "Name" id = "billingName" required><br/>
     <input type = "text" name = "Zip" id = "billingZip" pattern = [0-9]{5} required><br/>
   </fieldset>
   <input type = "submit" value = "Verify"/>
 </form>

JavaScript Form

built-in HTML5 validation at work

Using the onchange handler, when the checkbox is selected,  billingFunction() will run.  I used a nested conditionals statement to verify if the checkbox with id name same was checked.  Since the if-statement evaluates to false, the billingName and billingZip input fields from the form will be left blank to be added by the use. Else, if user selects the same checkbox, the input fields for billing will be populated with the text values of shippingName and shippingZip.

    function billingFunction() {
       if (!document.getElementById('same').checked){
          document.getElementById('billingName').value = '';
          document.getElementById('billingZip').value = '';
       } else {
          document.getElementById('billingName').value = document.getElementById('shippingName').value;
          document.getElementById('billingZip').value = document.getElementById('shippingZip').value;
       }
    }

While my form utilizes built-in HTML validation, the extra JS code will help with identifying duplicate information and matching text.  If the user unchecks the same box, the billingName and billingZip fields will go blank, as I indicated by setting the values to an empty string if the condition evaluates to false.

jsform

When user checks the #same box, billingFunction() is triggered to match information

I ended up getting 99.2% in the course, not bad considering I’m currently head high in AngularJS in completing an app for my full stack webdev specialization. I highly recommend it if you are looking for a short intro to JS event handlers. It’s currently available for free on Coursera or for a short fee if you would like a certificate. Click here to access it and enroll.

I put up my code on CodePen and GitHub as well if you like to see it live, or clone it to add your own custom code.  Overall, I’m feeling good about sticking to the 100Day challenge and will update you all soon on my day 2 with AngularJS.

*** Day 1 Recap ***

  1. Wrote code for form
  2. Added HTML5 validation elements
  3. Added JS functions for input validation and pattern matching
  4. Styled form, submitted assignment, finished course
  5. Added form to GitHub repo, shared on CodePen
Advertisements

3 thoughts on “#100DaysOfCode Day 1: Form Validation with HTML and JavaScript

  1. Pingback: #100DaysOfCode Day 14: MLK Day with AngularJS | Our Code
    • The exclamation point is a logical operator that equates to “not true”. The first conditional checks if the element with the id “same” is checked. If it’s not checked then the values of the billingName and billingZip ids are set to an empty string.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s