Tory Shows Us How to Create a jQuery Form Plugin

by: Kathleen Martin

Use of JQuery form plugins has varied over time.

Sometimes it was certain formats in the “HTML”, or passing specific classes. What I saw when I started reviewing these was the need for a robust developer form plugin, one that could adapt to progamming needs.

Thus my adventure began. I started mapping out how I was going to do this. Did I just want them to pass the HTML element “ID's” into the plugin? Should it be classes? Or should I just have the plugin run on its own?

It took me a little while to figure out the right way to tackle this. I soon realized I was going to go to the “names” of the “inputs” in order to let the user merely say if it should be email, standard text, passwords, or locations based on whatever the users' needs would be.

Now that I have explained why this plugin was being written, let's begin, starting with a basic plugin layout.

Where you see the words "form validation" is your plugin name. Since we are making a form validation plugin, we should leave this but name it according to the functionality of other plugins. Where you see the word "options" you will want to leave this as is, as it will come into play in a little bit.

Now let's actually add some options to make this plugin more robust. For part 1, we are going to simply create a basic text option that will have a minimum length, maximum length, required, and error messages for those three.

Let's set up the object that will be passed into the plugin return function.

I set this option up this way in order to make it as robust as possible for users and, mind you, this is Version 0.0.1 of this plugin as it is still in development.

Now let's dig into this. We have the name of the type of field we are checking, which in this case is “basicText”. Then within the name object, we have the “minLength”, “maxLength”, “name” and “required”. Within our parameters for basicText we will have two values. One will be “value”, and one will be “message”.

Before I explain what the parameters are for this, let's fill in the rest of the of the plugin.

Breaking this down, piece by piece:

  • minLength will have two parameters. One is value (the minimum number of characters allowed for this field). The other is message, which is sent back to the user if they enter less characters than are required.
  • maxLength has the same two parameters except this value is the maximum allowed.
  • Name, which has one parameter, value. This is a super important field, as it is what allows the plugin to check HTML input values.
  • Last we have required, which has two parameters: Value, which can be one of two values (true or false). True would make the input required to have filled out before the form is submitted. Yet again, a message parameter will be shown to the user if they do not fill out this field.
  •  
  •  

Now from the above code, we ended up adding a few extra parameters to allow this plugin to remain robust. First we have the options being assigned to the variable "o". 

I did this in case a user wanted to add options somewhere else in the source. 

Next we have the mappedErrors object that is initialized. We do this so that, if the input doesn't match all the checks we implement, we will be able to easily display errors. 

Now we're into the first part of our logic. We start with the function $('input').each(function (){});. This function will select all the inputs on the page, and loop through each of them one by one, allowing us as programmers to easily check them against our logic. 

Since we are looping through each input, we need to go through each of the options that we have set up. To accomplish this, create a loop that will loop through each option by title. "for(var key in o)" and match with the correct option within all list values. To accomplish this we have to match the two. "if(key == 'basicText' && $(this).attr('name') == o[key].name.value)"

Lets break this down some more. By using the if statement, it loops through each option until it finds the option that needs to be used for that specific input. 

Now we need to implement the logic that creates errors. Let's start with checking to see if this input is required, "if(o[key].required.value == true)". Once we know the input is required, we need to check if the input has a value in it.  If not, we need to tell the users that there was an error. 

Next we need make sure the length is larger than our desired minimum length by using if($(this).val()) < o[key].minLength.value). We use this in reverse for the maximum length. 

That's it. That is the start of our robust plugin. Next I am going to be adding extra options, optimizing returning the error object and sending messages. As well as possibly expanding to file upload checking. Stay tuned.  

Outlier

Video, Web, and Design Agency