JH Tech Services

A knowledgebase

Adding client-side form validation to a landing page.

by

Sometimes a client needs a single html file that represents a landing page. Some of the Email Service Providers (ESP) like MailChimp or ActOnSoftware.com, provide a dashboard to upload an html file, images, scripts and such and then provide a public url to the page. We usually then put the url as the link in an email campaign. This landing page would contain a form to ask for information from the user. We want to minimize junk information submitted by validating the form before it gets posted to our database. In this case we will need client-side form validation. What is the best way to do this?

HTML5 supports many new inputs and validation but unfortunately it is not fully supported by all browsers. One form was using just HTML5 validation and we quickly saw the database fill with blank records. Our Safari users could just press submit on a blank form and post the empty fields! Ugh. Obviously, this was not the best way. We are going to use jQuery Validation which offers a much larger compatible audience.

Let’s take this sample form with an added <div> to let us know it posted:




  

    

  

    

  

    

  




Posted

If we press submit without adding any data, it should succeed and the page will scroll down to the Posted <div>. This is mimicking a form with no validation. Let’s add the HTML5 attribute ‘required’ to the name input.

Unless you are using an old browser or Safari, pressing submit with nothing in the name field will cause an error message to appear and it will not submit. This is HTML5 validation. There are a lot of Safari users so let’s make it work for them, too.

JQuery Validation to the rescue

There are many JavaScript form validation libraries. In this article we are going to focus on a popular validation plugin for jQuery. It’s website can be found here.
First, lets add jQuery and the plugin to the html file. The easiest way is to add two script tags in the <head> section or near the end of the <body> container pointing to a CDN posted file like so..


   ...  /* ORDER IS IMPORTANT.  jQuery needs to be loaded before the validation plugin */
    
    
   ...

with that loaded let’s add the code to bind the validate plugin to our form and make the name input required. So either at the end of the <body> or in the <head> after our jQuery script tags add the following:

Now when we press submit we will get the default message next to the name field: “This field is required.” And notice, it does not submit. We pass the validate function an options object with a ‘rules’ object. The rules object contains the field name as the key and then an object listing how to validate the field. These rules are listed in the validation plugin website. Let’s say we not only want it required but it has to be a minimum of 2 letters. Our code would look like this:

Now if we enter in one character in the name field and press submit we will get the default message for the minlength rule of “Please enter at least 2 characters.”

Let’s change the default error messages.

How could we change the message here? All we have to do is add a messages object with the field name containing an object with the rule names and the message we want. Like so:

Styling the errors

On most browsers these error messages change as you type. The validation plugin will add the error in a label tag right next to the input tag. We can use CSS to change the formatting. We can target the errors using the css selector ‘label.error’ or specifically for this input via the selector ‘#name-error’.

Showing the error messages in their own containter

Most of the time, though, we find that the client wants the error messages listed in a particular area of the page. We can do this. We just need to add the container where we want the messages to go and then tell the validation plugin.

Let’s add the following markup after the form markup.

Now let’s tell the valiation plugin what container and that we want it wrapped in an <li> tag.


$('document').ready(function() {
  $('#myForm').validate({
    rules: {
      name: {
        required: true,
        minlength: 2
      }
    },
    messages: {
      name: {
        required: "Don't forget to input a name",
        minlength: "Really? Your name is only a single character?"
      }
    },
    errorLabelContainer: "ul.error-area",
    wrapper: "li"
  });
});

That’s it now the errors appear in the <ul> container as an unordered list.

Styling the input tags when they are invalid

You may have heard of the psuedo-class :invalid to let you style forms or inputs that are not valid. This doesn’t have direct correlation with the jQuery plugin. :invalid is added by the browser using HTML5 validation so it only applies to HTML5 validation rules like ‘required’ or ‘pattern’ or ‘type=”email”‘. The validation plugin will by default add the class ‘error’ to any input that is invalid. We can use this class to target and style invalid objects. We can change what class it uses by passing in a string to the options object.


...
   $('#myform').validate({
       errorClass: 'invalid',
          ...

Don’t show the error if the user is typing in the input field

Another request we get is to not show the error if the input field is focused. We can quickly accomplish this by adding ‘focusCleanup : true’ to our options object we pass to the validator.

Other cool stuff

There are many other options one can use. We have used the ‘highlight’ and ‘unhighlight’ options to pass in a function that does some JavaScript actions for us when a field is valid and when it is not valid.

Much of this code can be found at this codepen.

See the Pen Form Validation by Jerod Hammerstein (@jer0dh) on CodePen.

  • Knowledgebase