Css forms with jquery

Build better forms with jQuery and CSS

Reloading a web form to display errors is something we had to do long time ago. Does your website still has a form that does not display errors right away? If so, it is time for a change.

jQuery (and jQuery validation) provides all the tools you need to display any errors to the users. The concept is very simple, each field can be validated simply by using a «class». For example:

This one will validate if a valid email is entered ni the input field and display right away if the email is valid or not without refreshing the page.

Requirements:

Now that we have included the mandatory files, we have to build rules for our form. Let’s create a simple form with an email field, first name, last name, 3 radio buttons and 1 (one) checkbox.

In this case, each field are required and the email field has a email validation. The beauty of this validation is nothing else on the form is required to validate those fields. All the code is build in a separate JavaScript file.

To start, we have to declare the validation of the form itself, otherwise nothing will work.

That will take care of the class=»required» . Automatically, the jQuery validator will handle these and put the message above or bellow (depending on how you want to display it). Now, let’s add the email validation.

Now, email has to be treated differently from other fields since it needs to make sure an email is entered. jQuery validator has all the code to validate the email, the only difference here is you have to tell him which field is an email.

Now, that we have our main fields set-up, we have to create the JavaScript code that will handle the submit button. That button will simply call the validation (we created above) and return true or false.

This one will automatically show the errors on the page. Would it be nice to focus on the first error? Yes. In case of an error, it would be nice to focus on the field and not let the user search for it.

Make it look nice.

Now, remember we had a errorClass: «errorForm» predefine when we declared our validation? This is will tell the jQuery validator which class to use to display or change the fields (to make it more obvious to the user).

input.errorForm, select.errorForm < background: #ffdede; color: red; border: solid 1px red; /* and other declaration */ >label.errorForm < color: red; font-size: 10px; /* and other declaration */ >

This way, the fields with errors are easy to find. jQuery validator has a great advantage, it is very customizable. Here’s an example of adding a validation that does not allow spaces in the field.

The full scripts:

$(document).ready(function() < $("form").validate(< errorClass: "errorForm", rules: < >, messages: < >>); $(".email").each(function() < $(this).rules("add", < required: true, email: true, minlength: 8, messages: < required: "Please enter your email", >>); >); $('input[type=button]').click(function() < var valid = $("form").valid(); if(!valid) < var $('#' + id).focus(); return false; >return true; >); >);

Источник

CSS Form

In this tutorial, you will learn how to create a beautiful form with pop up message boxes using CSS & Jquery.

• This is a » Contact Us Form » created using tables. The table has two columns. The left column contains all the labels for the input fields on the right column.
• CSS3 has been used to decorate the forms.
• Message box will pop out when cicked on the input fields (Give it a try !!).
• This form is supported by all the browsers supporting CSS3.
  This form will function different on IE8 and lower versions as it has very less support for CSS3.

Steps For Creating the CSS Form

1. Create the Form
2. Create Popup Message element
3. Style the Form using CSS
4. Jquery to trigger and Animate the popup.

Step 1 : Creating the Form

The Forms are normally created in tabular format so we will create the Form using the tables.
The table will have two columns. One for Labelling the Input fields. The other one for the input field element.

Here how it looks without CSS Styling.

Step 2 : The Popup Message Elements

Now we will add Input Field related messages inside span tag elements, right next to the Input Fields.
These span tag elements will act as the popup messages.

Contact Us Form

Name ›	Enter Your Full Name
Email ›	Your Active Email Address
Address ›	Enter Your Full Address
Username ›	Type a username for this site
Password ›	More than 8 Characters long

Here’s the HTML Code for the Table

Notice the table has an id=»form_table» .
We’ll use this id later for styling the form and triggering the popups using jQuery.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

 
form1 method=post action= > 0 Us Form
 
25%>Name ›
 
 type=text name=name> Enter Your Full Name  
 
 
Email ›
 
 type=text name=email> Your Active Email Address  
 
 
top>Address ›
 
 type=text name=address style=height:80px>  Enter Your Full Address 
 
 
Username ›
 
 type=text name=username> Type a username for this site  
 
 
Password ›
 
 type=password name=password> More than 8 Characters long  
 
 
 
 type=submit name=submit value=Submit Form>  type=reset name=reset> 
 
 
 
  

Step 3 : Style the Form Using CSS

Now we’ll convert the ordinary looking Contact Form into a Cool looking form using CSS Stylesheet.
We will use a background image for the caption element and add some height and width to it.
The input textboxes and the textarea have round corners and about 2 pixels thick grey colored border.
The background color will also change when these fields are foucused.
The Submit and Reset Buttons have same width and the same background color as the input fields.

Here’s the CSS Code for the Form

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

The Explanation
Line 3 › #form_table <
→ Selector of the table having id=»form_table» .
→ Properties like background color, border size and color, width are defined here.

Line 11 › #form_table th <
→ Selects the th tags of the table .
→ White colored text is applied to the table heading.

Line 16 › #form_table td <
→ Selects the td tags of the table .
→ Width and Relative position are defined here for the td tags.
→ Relative position is important here, it will help to position the span elements later.

Line 20 › #form_table caption <
→ For selecting the caption tag element.
→ Background image, width, height etc. are declared here for the caption tag.

Line 28 › #form_table input, #form_table textarea <
→ Here a comma is used between the two selectors to apply same set of properties.
→ Properties like border, backgound, width etc are defined here.
→ Rounded Corners have been used here for the text and textarea fields.

Line 42 › #form_table input [ type= submit ] , #form_table input [ type= reset ] <
→ For selecting the input fields with type=»submit» and type=»reset» .
→ Same width is applied to the submit and reset buttons.

Line 45 › #form_table input: focus , #form_table textarea: focus <
→ When the input or the textarea fields gets focused their background color will change to a lighter shade.

Line 48 › #form_table input + span, #form_table textarea + span <
→ For Selecting the span elements right next to the input and textarea fields.
→ Background is added to the span element.
→ By default span element will be hidden from view (using Display Property) until the input field is focused.

Step 4 : Apply jQuery For Popups

The span elements are hidden from view now. We will make them appear only when the field is focused.
For the Popup Effect, jQuery Library needs to be included in the webpage.

Include jQuery Library

jQuery can be downloaded from › jQuery.com ‹.

We will include jQuery inside the tags.
Here’s the code:

There’s an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to «http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js»;

The jQuery Code

This code will make the span elements right next to the input and textarea fields Popup.
Paste this code inside the head tags.

1 2 3 4 5 6 7 8 9 10 11 12

The Explanation

Line 3 › $ ( document ) .ready ( function ( ) <
→ This function will run only when the page(document) loads completely.

Line 4 › $ ( input,textarea ) .focus ( function ( ) <
→ This function selects the the input and textarea fields.
→ This function runs only when the fields are focused with cursor.

Line 5 › $ ( this ) .next ( span ) .show ( slow ) .css ( display , inline ) ; > ) ;
→ The span element right next to the fields will pop out.
→ The Pop up Effect will show up slowly.
→ Display Inline property is added to the span element, so the message pops out from the right side.

Line 7 › $ ( input,textarea ) .focusout ( function ( ) <
→ This function runs when foucusout event occurs on input or textarea .

Line 8 › $ ( this ) .next ( span ) .hide ( slow ) ;
→ The Pop up Effect will hide slowly.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

Источник