Signup Form Design With Jquery Validation

Signup Form Design With Jquery Validation

Features:

• Structured CSS which will suits with Firefox,IE,opera
• Client Side advanced validation with all fields using Jquery
• Validated and structured HTML which can be used in any site
• MVC Structured Usage(CSS,Images,JS,Html Separated)
• Used reset css to make it multi browser compatible

Why Signup Form ?

Signup form is used to give user to create account in your site. So it needs to be very clear in design and should be validated from client side itself. The main purpose of giving more concentration on this is because this is the way for users to enter and inspired on your site. So make sure to give right entrance.

How it Should be Designed?

Here is the full example of making such a form with full javascript validation using jquery and css.

So we now we are going to design the signup form from scratch to end.

Before going to start design you should design it in a paper or paint to get overall design so you will be able to bring it very easily.

For example,

Step 1:

Design all your html entities first and never design your css first. Follow the structure correctly and name it using ID or class to style it in near future.

Like this,

Step 2 :

So now we are having a html file alone without any style exactly like this. Now we need to add reset css to make this form to support multi browser.

-Reset css will reseting all your browser default styles to none and we can style the elements as per our need later.

Eg : IE will take h1 tag font size in different way than firefox. So we will reset the default values to none like this

*{margin:0px;padding:0px;}

h1{font-size:14px;}

So once we applied reset css we will get the output as like this

Step 3 :

Applied reset css and designed html part fully. So now make a separate stylesheet and paste all reset css content in the top and start the actuall css design after that like this.

And please never ever forget to make a comment for each block in html and css to modify anything in the future.

Once you applied actual css you will be able to see your actual output.

Step 4 :

So now the full design is ready and now we need to apply javascript validation with the help of jquery plugin. Add jquery plugin to your file structure and make the separte validations as like this.

We will see the jquery validations in coming days and for your need you can always get this copy of source.

And always go in structure way to organize your data well. Like this.

And still there are many nice signup forms with good validations , we will list out all those forms soon.

How to use it?

You need to change some of the fields and messages as per your specifications and design.

Edit stylesheet , html, js files in the Signup folder and use it for your signup form.

Output

Before validating

After validating