#100DaysOfCode Weekend Update: jQuery, Form Validation, and Using Google Maps in Bootstrap

I didn’t do much coding this weekend. Probably not more than an hour on Saturday and Sunday to be honest.  I did more reading and studying from Duckett’s “JavaScript and JQuery” than anything, which is like a break considering how hard I’ve been going on this challenge.  I also made sure all the code in the challenge repo was updated (refactoring) and popped in on a few hangouts via CodeBuddies.

I’m almost finished with the Bootstrappin’ Portfolio project as well.  I added a contact page that includes a form utilizing Bootstrap Validator and a map powered by Google.  A simple BS Validator script works nicely with the project and there was no need for me to disable HTML5 validation. Here’s how to use it on your form.

Get the CDN.  Rather than downloading packages and adding extra weight to a project, I try to use a Content Delivery Network, or CDN links as much as possible.  There was one available for BS Validator powered by jQuery, and I pasted it before the closing </body> tag.  Here is the CDN you can use:

http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js

Next, make sure <input> fields in your form are labeled by name and id.  My form took the user first and last name, email, phone number, and message, but I only wanted the first name, email, and message required for submitting the form.  I gave those fields names and ids of name, email, and message. Using key value pairs on #contact-form, the id I gave my form, I set the error messages of what should be shown to the user.  I also set feedback icons for validating input using glyphicons.  Here’s the complete script:

$('#contact-form').bootstrapValidator({ 
    //live: 'disabled',
    message: 'This value is not valid',
    feedbackIcons: {
       valid: 'glyphicon glyphicon-ok',
       invalid: 'glyphicon glyphicon-remove',
       validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
       name: {
          validators: {
             notEmpty: {
                message: 'The Name is required and cannot be empty'
             }
          }
       },
      email: {
         validators: {
            notEmpty: {
               message: 'The email address is required'
            },
            emailAddress: {
               message: 'The email address is not valid'
            }
        }
      },
      message: {
         validators: {
            notEmpty: {
               message: 'The Message is required and cannot be empty'
            }
         }
      }
   }
 });

I placed the entire form inside a Bootstrap <div> using the well class which was easy to apply styles to.  For the map of “my office location”, I used a Bootstrap <div> with the panel class, putting the address in the <div> with the class panel-body and the map in a separate <div> right under that.  I assigned the div for the map an id of map1.  For the jQuery script to create the map, I followed Google Developers’ tutorial on the subject, making sure the longitude and latitude components were accurate for the address and city I wanted displayed.  Here’s the complete script:

jQuery(function ($) {
    function init_map1() {
        var myLocation = new google.maps.LatLng(41.858608, -87.660395);
        var mapOptions = {
            center: myLocation,
            zoom: 16
        };
        var marker = new google.maps.Marker({
             position: myLocation,
             title: "Property Location"
        });
        var map = new google.maps.Map(document.getElementById("map1"),
            mapOptions);
        marker.setMap(map);
    }
    init_map1();
 });

Overall, I pretty happy with the look of the Contact page so far.  Here’s a screenshot of what I created:

contact form on the left, map on the right

contact form on the left, map on the right

I’m keeping the portfolio project simple, so I’ll work on fonts and adding assets this week.  Since it’s on Github, anyone can fork it, customize it, and make it their own.  I see it particularly being useful for noobs interested in a starter site.

To see the complete changes I made to Bootstrappin’ Portfolio project, check it out in the #100DaysOfCode repo, or click here to go directly to the code for the Contact page.

Advertisements

One thought on “#100DaysOfCode Weekend Update: jQuery, Form Validation, and Using Google Maps in Bootstrap

  1. Pingback: #100DaysOfCode Day 14: MLK Day with AngularJS | Our Code

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