Creating a Javascript form validation plugin8 min read

Javascript form validation plugin at work

After my HTML Form designs are complete the next problem was to validate the input data before sending it to the servers. I don’t use Jquery or any other javascript frameworks. Also i did not find the inbuilt browser validation working well with the user interface i had in mind. So i had to come up with a new “Javascript form validation plugin” in pure vanilla javascript.

OK maybe i should have named it better.

Let’s get started

So where do i start ?

Here are the thing i wanted it to do

  • Set min, max and other properties on the input element and the plugin should check if the input text satisfies the conditions
  • Show an error message with a user recognizable field name and reason why it failed the test.
  • Scroll to the element which broke the rule on submit.
  • Do not submit data if no changes are made in an edit data form.
  • Generate a JSON string from the form data.

I am no expert in javascript but it seemed simple and i had to give it a try.

So i decided to add 2 custom attributes to my input elements.

  • data-sname: A replacement for the name attribute for inputs. This is for the servers to understand what field the data should be inserted to. Ex – If it is the username field data-sname attribute would be “username”.
  • data-lname: A field name that the end user would understand. Ex – If any required field was left blank, the error message would be {data-lname of elem} is required.

To start with let us add 3 rules

  1. min – Min value of the input.
  2. max – Max value of the input.
  3. required – whether the field is mandatory.

More rules can be added to improve upon our “Javascript form validation plugin”.  Yup SEO.

Here is the form we have created in this article with our new found attributes added.

Javascript

Let us create a validator object.

It takes the form element which has to be validated as input.

Now let us add the functions that would validate the input.

The validation functions take 3 inputs

  1. The inputted value.
  2. The value against it has to be checked.
  3. The type of the input element.

The functions return an array. Array key position 1 gives the validity of the input against the condition provided as Boolean. Position 2 gives the error message if any as string.

Now lets add a message box to show the error message.

We also need a function to show this message box.

And a scroll to element function

Before that we need a function that would return the value of a given element regardless of its type.

Now the validate function

The function loops through all elements of the given form and creates an array of elements which has an attribute of data-sname.

As you can see if an attribute of data-init is set to an element, the current value of the element is checked against the value of this attribute to see if any changes were made.

On error our validator shows a message and focuses on the element which broke the rule. Finally if no errors are found it returns an object with data-sname as key and value of element as value.

Now let’s put our validator to work

The returned object is converted to a JSON string, and is ready to be send to our servers for further validation.

Download validator.js

You can download the js file from the above link and use it as shown in  code above.

Here is a working example

See the Pen XjzRrg by hrishikesh mk (@avastava) on CodePen.0

Styling HTML Forms4 min read

Styling HTML forms

I wanted to create a simple but good looking HTML Form for my applications. After searching the internet for inspiration this is what i came up with –

See the Pen HTML forms by hrishikesh mk (@avastava) on CodePen.0

Code

HTML

Inside the form (.fiform) the input elements are enclosed inside a container (div .fi). Inside the container comes the label element which encloses the input text and input elements. This is done so that the input element gets focus when the user clicks anywhere inside the label.

 

CSS

The form is given a display of table. Inside the form the input fields with labels are put in a container with a display of table-row. The labels are given a display of table-cell so that they fill the parent and its contents can be vertically aligned.

The input elements are given a width of 100% so that they fill the form width. Also let’s give the inputs the same background as the body. Input auto-fill color is also changed in webkit browsers using -webkit-autofill property.

Everything looked good until the time came to add check-boxes to the form. So i started my search for cool check box styles.

Fortunately I came across a youtube channel called Devtips. So i just stole the idea and got a good checkbox style for my form.

Here is the link to their tutorial – How to make Custom Animated Checkboxes with CSS .

Javascript

Now the only thing left was to highlight the label text when the input element is in focus. So let’s bring in some javascript.

And the form is ready.

Link to part two of the tutorial – Styling HTML Forms 2 .