Signup Form Design With Jquery Validation

Signup Form Design With Jquery Validation

Fea­tures:

• Struc­tured CSS which will suits with Firefox,IE,opera
• Client Side advanced val­i­da­tion with all fields using Jquery
• Val­i­dated and struc­tured HTML which can be used in any site
• MVC Struc­tured 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 cre­ate account in your site. So it needs to be very clear in design and should be val­i­dated from client side itself. The main pur­pose of giv­ing more con­cen­tra­tion 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 exam­ple of mak­ing such a form with full javascript val­i­da­tion 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 over­all design so you will be able to bring it very easily.

For exam­ple,

Step 1:

Design all your html enti­ties first and never design your css first. Fol­low the struc­ture cor­rectly and name it using ID or class to style it in near future.

Like this,

Step 2 :

So now we are hav­ing a html file alone with­out any style exactly like this. Now we need to add reset css to make this form to sup­port multi browser.

–Reset css will reset­ing all your browser default styles to none and we can style the ele­ments as per our need later.

Eg : IE will take h1 tag font size in dif­fer­ent way than fire­fox. So we will reset the default val­ues to none like this

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

h1{font-size:14px;}

So once we applied reset css we will get the out­put as like this

Step 3 :

Applied reset css and designed html part fully. So now make a sep­a­rate stylesheet and paste all reset css con­tent in the top and start the actu­all css design after that like this.

And please never ever for­get to make a com­ment for each block in html and css to mod­ify any­thing 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 val­i­da­tion with the help of jquery plu­gin. Add jquery plu­gin to your file struc­ture and make the sep­a­rte val­i­da­tions as like this.

We will see the jquery val­i­da­tions in com­ing days and for your need you can always get this copy of source.

And always go in struc­ture way to orga­nize your data well. Like this.

And still there are many nice signup forms with good val­i­da­tions , we will list out all those forms soon.

How to use it?

You need to change some of the fields and mes­sages as per your spec­i­fi­ca­tions and design.

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

Out­put

Before val­i­dat­ing

After val­i­dat­ing