#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.

Want to Use Your Coding Skills for Good? Two Orgs That Can Help

Code For America has created the Civic Tech Issue finder tool which will allow users to search Github for civic projects in their area.  To use the tool, you can choose your “brigade” or region, add labels to lower your search, and search by skills level.  While using “Code For Nashville” as my brigade and the search label “help wanted”, I was able to find a multiple projects of interest, including one for blogging, something I love to do.

To use the tool or embed it on your site, go to Code For America and enter your search inquiry.

Also, Social Coding For Good is accepting volunteers for projects.  Social Coding For Good is an organization that was started to connect web professionals with open source projects and volunteer their time working on tech solutions to social causes. The projects focus on causes in healthcare, education, disaster relief, conservation, human rights, poverty alleviation, and many others.  In addition, volunteers can choose to work with tech companies already working on these areas including Mozilla, the Wikimedia Foundation, Benetech, and Medic Mobile just to name a few.

To sign up and volunteer, click here to fill out the initial form.

Volunteering your time to tech projects is a great way to boost your skills and collaborate with others remotely.  Find ways to get involved outside of work and school.