JQuery Form Validation

Why?

There are TONS of examples of form validation out on the net. Some of them bundled as external JavaScript files and some as full blown tutorials. However, this is an attempt for myself to have a deeper understanding of form validation and work through breaking it down and implementing my own custom validation. I decided to post my progress here in case any of you might find it beneficial.

Where We Begin

Lets start with a basic page/input fields.


    
        
        
        
    
    
        

Throw that in a document and save it. Great! We have an extremely basic form that we can use to test out some rudimentary validation.

Bring on the JQuery!

JQuery, if you don’t already know, is an amazing library that makes working with JavaScript much easier than in its raw form. JQuery extends built in functions and provides its own for easily dealing with arrays, objects and the DOM as a whole. Our validation exersize will take advantage of these functions to limit the amount of work we have to do.

Selectors

A selector is exactly as it sounds, it allows JQuery to “select” an element out of the DOM for use in other functions. You can select an element based on the tag type, class or id. There are more but these are all we are interested in for now.

So back to our form, lets say we want 2 fields to be mandatory and 1 field to be optional. Allow the user to submit the form as long as the required fields are filled in. Well in order to do this, we need a list of the required fields some how. The class attribute on an element will allow us to add a non-unique attribute to any element. Perfect for making an input field “required” as there will be multiples. So lets update our form with some classes:

        
        
        

Now that we have some elements with a specific attribute we are interested in, we can start to work with JQuery and build the foundation of our validation. Lets start with the following code inside our empty script tags:

        

The first line of JavaScript makes sure the page has completely loaded for the user before it begins to execute the JavaScript. If you’ve done any programming in other languages you can think of it as the “main” execution function, though it is not mandatory. Our custom functions will be defined outside of this function but will be executed inside of it. Next we have a function that runs off the object created from our JQuery selector. This each() function is a JQuery custom function that allows us to iterate through an array. Basically, “for each item in the array, do the following…” and in our case it will alert and show the id for each element that has the “required” class. Lets go ahead and run it!

Ah man, empty alerts… but atleast we got 2 of them. Lets go give each form element an id, so that we have a means to reference back to a specific element.

        
        
        

Alright! Save and try again.

Excellent! We get the elements id’s back. So let’s take a moment and reflect on our progress. We’ve constructed a basic form and indicated fields that are to be required by adding a certain class to them. Then we are able to grab an array of each element that has this class and reference the individual elements id. Not too shabby.

!= NULL

Lets check to make sure that the required fields arent null or empty. This is the most basic type of validation, make sure they actually put something in there! Let’s add the following to our JavaScript:

        

Now after you save and run you notice we will only get one alert for input1, this is because select element selects the first element for its default. If you type some text into input1 and refresh the page, you shouldn’t get any alert messages.

To be Continued…

Next time we will continue to make some basic improvements to our validation such as having the function run when submit is clicked and how to gracefully handle the events that are triggered during the submit.

Thanks for stopping by and I hope this was informational!

Feed The Beast Server

We have recently added a Feed The Beast server to our line-up. I found a seed that has a rather comfortable spawn point so feel free to join up and get settled in. Please make sure you are using all mods in the Mindcrack mod pack. You can select this in the FTB launcher.

Happy Mining!

Vanilla Minecraft Server

Our current vanilla Minecraft server is in its second iteration. We are currently using a custom seed found by Ayca01 that includes a stronghold very near to spawn. There is currently no estimation of lifetime for this seed.

In the Clouds!

So I just signed up for a free account over at RedHat’s OpenShift and moved my site over to them. I have to say that so far it’s been extremely easy integrating tools with them and I can’t wait to setup another gear for node.js/mongodb stuffs.

Anyways! I’ve setup a basic layout here, I’ll be posting information on my 2 Minecraft servers in the Minecraft section, music will be for any songs I may (never) finish, and tech will most likely end up with sub-cats for JS/Web, IT Infrastructure and anything else geek.

Thanks for stopping by and enjoy the site!