Blogfreakz - Web Design and Web Development resources » Forms http://blogfreakz.com A site dedicated to keeping up with the latest trends on Web Design Thu, 17 May 2012 00:27:50 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Gravity Registration Form With jQuery http://blogfreakz.com/tutorial/gravity-registration-form-with-jquery/ http://blogfreakz.com/tutorial/gravity-registration-form-with-jquery/#comments Wed, 28 Mar 2012 01:53:32 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26477 Jazz up your online form by adding eye-catching effects to it with  this jQuery tutorial!

Gravity Registration Gravity Registration Form With jQuery

This jQuery code is known as the “Gravity Registration Form” because it shows the next hidden field for the user to fill up by making it drop down below the preceding one. Click on the image above for the demo.

Here’s the JavaScript code:

Contains javascipt code. $(“#email”).keyup(function(){}- email is the ID name of input field. Using $(this).attr(“id”) calling input field value. Fields validating using regular expressions.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"   src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(function()
{
// Displaying first list email field
$("ul li:first").show();
// Regular Expressions
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_email =   /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
// Email validation
$('#email').keyup(function()
{
var email=$(this).val();
if (!ck_email.test(email))
{
$(this).next().show().html("Enter valid email");
}
else
{
$(this).next().hide();
$("li").next("li.username").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});
// Username validation
$('#username').keyup(function()
{
var username=$(this).val();
if (!ck_username.test(username))
{
$(this).next().show().html("Min 3 charts no space");
}
else
{
$(this).next().hide();
$("li").next("li.password").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});
// Password validation
$('#password').keyup(function()
{
var password=$(this).val();
if (!ck_password.test(password))
{
$(this).next().show().html("Min 6 Charts");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});
// Submit button action
$('#submit').click(function()
{
var email=$("#email").val();
var username=$("#username").val();
var password=$("#password").val();
if(ck_email.test(email) && ck_username.test(username)   && ck_password.test(password) )
{
$("#form").show().html("<h1>Thank   you!</h1>");
}
return false;
});
})
</script>

Now here’s the simple HTML code:

<form method="post" >
<ul>
<li>
<label>Email: </label><br/>
<input type="text" name="email"   id="email" />
<span></span>
</li>
<li>
<label>Username: </label><br/>
<input type="text" name="username"   id="username" />
<span></span>
</li>
<li>
<label>Password: </label><br/>
<input type="password" name="password"   id="password" />
<span></span>
</li>
<li>
<input type="submit" value=" Register "   id='submit'/>
</li>
</ul>
</form>

In case you want to put in an additional field, just follow the 2 short steps below:

For example, you want to add “City” in the list of fields you insert this in the HTML code:

<li>
<label>City: </label><br/>
<input type="text" name="city"   id="city" />
<span></span>
</li>

And then go to the JavaScript and replace this:

$("li").next("li.submit") to   $("li").next("li.city")

With this:

// Regular Expression
var ck_city = /^[A-Za-z0-9 -]{3,20}$/;
// City validation
$('#city').keyup(function()
{
var email=$(this).val();
if (!ck_city.test(email))
{
$(this).next().show().html("Enter valid city");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration:   'slow',easing: 'easeOutElastic'});
}
});

And now for the final CSS code, where li {display:none} while page loading jquery displaying first list li:first email field.:

ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900;
font-size:14px;
padding:4px;
width:180px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:350px;
margin:0 auto;
margin-top:30px;
}

Download the full script here (.zip, 30.3KB).

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/gravity-registration-form-with-jquery/feed/ 0 Create a Unique CSS3 Transition Contact Form http://blogfreakz.com/web-design/create-a-unique-css3-transition-contact-form/ http://blogfreakz.com/web-design/create-a-unique-css3-transition-contact-form/#comments Wed, 21 Mar 2012 02:26:59 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=26340 Contact Form Create a Unique CSS3 Transition Contact FormHit the envelope to view the demo!

Here’s a nice and unique contact form with CSS3 transitions that visitors will love using in your website. Created by Pehaa, it features a letter sliding out from an envelope once you hover your mouse over it.

Note: This works in browsers that support CSS3 transitions. The envelope is not visible if you use IE.

Get the TUTORIAL and ZIP FILE now!

 

 

 

 

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/create-a-unique-css3-transition-contact-form/feed/ 0 Password Strength Verification with jQuery http://blogfreakz.com/tutorial/password-strength-verification-with-jquery/ http://blogfreakz.com/tutorial/password-strength-verification-with-jquery/#comments Thu, 01 Mar 2012 03:10:22 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=25668 When creating a site with user accounts, you will need enough security to ensure that user passwords are strong and can’t be hacked easily. Factors like length, adding alphanumeric characters, unpredictability and complexity should be considered well.

PW Password Strength Verification with jQuery

Jim Nielsen shares a jQuery and CSS3 tutorial on making a form that will give users live feedback if the password they enter meet the necessary complexity requirements. Click on the image above to launch the tutorial now!

 

 

 

 

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/password-strength-verification-with-jquery/feed/ 0 Filter Data with jQuery http://blogfreakz.com/tutorial/filter-data-with-jquery/ http://blogfreakz.com/tutorial/filter-data-with-jquery/#comments Mon, 27 Feb 2012 04:45:32 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=25558 Ever noticed how shopping sites can filter out certain items according to the visitor’s preferences? Here’s a quick and very helpful tutorial that will teach you how to do something similar to that without any need for database calls or page refreshes.

Let’s begin with the CSS structure to make the layout presentable.

/* SIMPLE CSS RESET */
html, body, div, span,   applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,   blockquote, pre,
a, abbr, acronym, address,   big, cite, code,
del, dfn, em, font, img, ins,   kbd, q, s, samp,
small, strike, strong, sub,   sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label,   legend,
table, caption, tbody, tfoot,   thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none;   }
blockquote:before,   blockquote:after,
q:before, q:after { content:   ''; content: none; }
/* remember to define focus   styles! */
:focus { outline: 0; }
/* remember to highlight   inserts somehow! */
ins { text-decoration: none;   }
del { text-decoration: line-through;   }
/* tables still need   'cellspacing="0"' in the markup */
table { border-collapse:   collapse; border-spacing: 0; }
/*- -*/
/*- FILTER OPTIONS -*/
ul#filterOptions {
width: 802px;
height: 52px;
margin: 30px 0;
overflow: hidden;
}
ul#filterOptions li { height:   52px; margin-right: 2px; float: left; }
ul#filterOptions li a {
height: 50px;
padding: 0 20px;
border: 1px solid #999;
background: #cfcfcf;
color: #fff;
font-weight: bold;
line-height: 50px;
text-decoration: none;
display: block;
}
ul#filterOptions li a:hover {   background: #c9c9c9; }
ul#filterOptions li.active a   { background: #999; }
/*- -*/

The CSS is divided into 2 parts. The first one uses the CSS reset snippet by Eric Meyer to iron out any potential browser inconsistencies, while the second (labeled “/*- FILTER OPTIONS -*/”) indicates the button styles.

Now for our HTML:

<ul   id="filterOptions">
<li><a   href="#">All</a></li>
<li><a href="#"  >Group 1</a></li>
<li><a href="#"  >Group 2</a></li>
<li><a href="#"  >Group 3</a></li>
<li><a href="#"  >Group 4</a></li>
</ul>

A different class is assigned for the link elements because we’ll be using it later in jQuery to indicate the items to be filtered out.

Now we’re going to put a style on the target data (list of items to be filtered) with CSS below, followed by the updated HTML. In this example, we will assume our items to be image files. The h3 tag is basically for the corresponding names for the images. Both the image and the name are then surrounded by a fixed height and width div element to everything aligned.

CSS

/*- OUR DATA HOLDER -*/
#ourHolder { width: 800px;   height: 850px; overflow: hidden; }
#ourHolder div.item {
width: 200px;
height: 200px;
float: left;
text-align: center;
}
#ourHolder div.item h3 {   margin-top: 10px; font-size: 16px; line-height: 20px; }
/*- -*/

HTML

<div   id="ourHolder">
<div>
<img   src="images/accrington-stanley.jpg" alt="Accrington   Stanley" />
<h3>Accrington Stanley</h3>
</div>
<div>
<img src="images/picture01.jpg"   alt="Picture 1" />
<h3>Picture 1</h3>
</div>
<div>
<img src="images/picture002.jpg"   alt="Picture 2" />
<h3>Picture 2</h3>
</div>
...            //insert any additional items   here
</div>

Once you use this code, make sure you rename your jpeg files (picture002.jpg) accordingly.

We’ve also added another class (i.e. item group01) to our items which matches up to the classes assigned to our filter options links (class=”group01″ under “filterOptions”). This will be our reference on which items will be shown once a filtered link is selected.

For the jQuery, we’ll be using a hosted copy of the jQuery that is linked to Google’s CDN. To do this, we’ll place the following snippet within our web page’s <head></head> tag.

HTML

<script   language="javascript" type="text/javascript"   src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Next, we need to display the specific items with a few more jQuery. All the items are displayed by default.

Once the visitor clicks on a filter option link, jQuery will fetch the element class that is clicked on and assign it to the ourClass variable. After the ourClass variable is discovered we deactivate all the filter option elements and reassign the active class to the clicked filter option element (this will show the visitor what they’re filtering by).

We will also determine if the user has clicked the ‘all’ filter option. If this is the case, then all the items under the same class are shown. Lastly, ‘return false’ should be indicated to prevent the page from automatically scrolling back to the top.

$(document).ready(function()   {
$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');
// reset the active class on all the   buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked   button
$(this).parent().addClass('active');
if(ourClass == 'all') {
// show all our items
$('#ourHolder').children('div.item').show();
}
else {
// hide all elements that don't share   ourClass
$('#ourHolder').children('div:not(.' +   ourClass + ')').hide();
// show all elements that do share   ourClass
$('#ourHolder').children('div.' +   ourClass).show();
}
return false;
});
});

 

 

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/filter-data-with-jquery/feed/ 0 Make Blinking Neon Forms with CSS3 and jQuery http://blogfreakz.com/tutorial/make-blinking-neon-forms-with-css3-and-jquery/ http://blogfreakz.com/tutorial/make-blinking-neon-forms-with-css3-and-jquery/#comments Mon, 23 Jan 2012 13:12:25 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=24484 This cool form effect has the usual attributes we enjoy — rounded corners, stroke edges and other CSS-generated qualities. But thanks to web developer Rakesh Menon, this one’s got another thing up its sleeve: it’s got a  glowing neon border that pulsates!

114 285x175 Make Blinking Neon Forms with CSS3 and jQuery

Here’s the demo for you to really appreciate it. Click here for the source files (/zip).

Now let’s start the tutorial with the xHTML to setup the layout.

xHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

<html xmlns=”http://www.w3.org/1999/xhtml” >

<head>

<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />

<title>Form Tutorial</title>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>

<script type=”text/javascript” src=”highlight.js”></script>

</head>

<body>

<div id=”page-wrap”>

<form id=”myform” method=”post” action=”#”>

<div>

<div >

<label for=”personname” >Name</label>

<input name=”personname” type=”text” />

</div>

<div >

<label for=”email” >E-mail</label>

<input name=”email” type=”text” />

</div>

<div >

<label for=”website” >Website</label>

<input name=”website” type=”text” />

</div>

<div >

<label for=”details” >Details</label>

<textarea name=”details” ></textarea>

</div>

</div>

<!–div ></div–>

<input type=”submit” value=”Submit” />

</form>

</div>

</body>

</html>

If you would rather use Google’s API instead of downloading a copy of jQuery, you can just replace this part of the code “<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>” with the one below:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

Once you’ve decided where to get the source for your jQuery, let’s move on to CSS.

CSS

*{ 

margin:0;

padding:0;

}

textarea, input{

outline:none;

}

body{

background:#3D3D3D;

}

#page-wrap{

width:350px;

min-height:500px;

height:auto;

margin:0 auto;

position:relative;

padding-top:50px;

font:15px Arial;

}

#myform{

width:375px;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

margin:0 auto;

position:relative;

}

#myform label{

top:10px;

position:relative;

color:white;

}

.field{

background:gray;

padding:15px 15px 0 10px;

height:50px;

width:350px;

}

#myform div:first-child{

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

#myform div:last-child{

-moz-border-radius-bottomleft: 8px;

-moz-border-radius-bottomright: 8px;

-webkit-border-bottom-left-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

.area{

padding:15px 15px 0 10px;

min-height:195px;

}

.inputfield{

padding:0 10px 0 10px;

float:right;

width:200px;

font:15px Arial;

border:2px aqua inset;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

}

.textfield{

height:25px;

padding-top:5px;

}

.textarea1{

padding-top:10px;

padding-bottom:10px;

height:150px;

max-height:200px;

max-width:250px;

}

If you take a look at the result at this point you’ll notice that you still have the default look for the submit button. If you want to change it, just copy/paste and add this code in your CSS.

.submitbutton{ 

border: 0px;

float:right;

width:75px;

height:40px;

font:20px Arial;

position:relative;

top:20px;

right:10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

-webkit-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */

filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’); /* IE6,IE7 */

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’)”; /* IE8 */

}

.submitbutton:hover{

background: #3cdfdf;

color:white;

}

The last piece of CSS code below will add the glowing effect to the neon edges of your input boxes. This part (@-webkit-keyframes) by the way, only works in browsers using the Webkit layout engine like Chrome and Safari:

@-webkit-keyframes pulsate { 

0%   {  -webkit-box-shadow: 0px 0px 0px #3cdfdf;  border:2px aqua inset  }

25%  {  -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset  }

50%  {  -webkit-box-shadow: 0px 0px 0px white;    border:2px white inset }

75%  {  -webkit-box-shadow: 0px 0px 35px white;   border:2px white inset }

100% {  -webkit-box-shadow: 0px 0px 0px #3cdfdf;  border:2px aqua inset  }

}

.inputfield:focus{

-webkit-animation-name: pulsate;

-webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count: infinite;

-moz-box-shadow: 0px 0px 30px  #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

}

And lastly, we’ll work on the jQuery. This part of the tutorial can actually be considered as optional since it simply adds a black background to set off the highlighted input field (see comparison image below).

28 e1327323930229 300x33 Make Blinking Neon Forms with CSS3 and jQuery

If you’d like to include it in your design then just copy/paste this code in to your .js file:

$(document).ready(function(){ 

var globalParent=null;

var mouse_is_inside=false;

/*The snippet below is activated when an inputfield is focused*/

$(‘.inputfield’).focus(function(){

globalParent=$(this).parent(‘div’);

globalParent.click();

});

/*This following part will be activated when the inputfield loses focus*/

$(‘.inputfield’).blur(function(){

globalParent.click();

});

/*Following part will be activated when the user clicks anywhere inside

the container div of the inputfield*/

$(‘.field’).click(function(){

if(!($(this).is(‘.dummy’))){

$(‘.dummy’).css(‘background-color’,'gray’);

$(‘.dummy label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

$(this).css(‘background-color’,'black’);

$(this).children(‘label’).css(‘color’,'#3cdfdf’);

$(this).addClass(‘dummy’);

}

});

/*The following code checks time and again whether the mouse is inside the form or not*/

$(‘form’).hover(function(){

mouse_is_inside=true;

},

function(){

mouse_is_inside=false;

}

);

/*If user clicks anywhere outside the form, all highlighting is removed*/

$(‘body’).click(function(){

if(!mouse_is_inside)

{

$(‘.field’).css(‘background-color’,'gray’);

$(‘.field label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

}

});

});

And that concludes this tutorial. Try to run or open your HTML and see if it’ll work on your browser. I personally have only tested it in the latest version of Chrome and IE9, and the blinking effect doesn’t work in IE9. Yet. Still, I hope you enjoy this one!

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/make-blinking-neon-forms-with-css3-and-jquery/feed/ 2 9 Highly Useful Form & Validation jQuery Plugins http://blogfreakz.com/web-design/9-highly-useful-form-validation-jquery-plugins/ http://blogfreakz.com/web-design/9-highly-useful-form-validation-jquery-plugins/#comments Thu, 12 Jan 2012 08:00:59 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=24261 It’s been another very productive year for web designers and developers this past 2011, which was brimming with jQuery plugins. And according to my observation, many of them are content sliders.

So to start off this year, we’ll focus on another particular set of plugins that have made 2011 a bit easier for web developers. This is my list of the Most Helpful New Form & Validation Plugins of 2011, in random order:

1. Recurly.js – This plugin allows you to create secure, PCI compliant transaction forms with fully customizable CSS.

16 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo

2. Ideal Forms – This deceptively small framework is used to build powerful and beautiful online forms. It is highly customizable because it’s all CSS, and also supports the latest browser versions.

25 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo

3. In-Field Labels – This plugin turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focused and disappear when text entry begins. Clearing a field and leaving brings back the label into view. It supports old browsers (i.e. IE6 and Firefox 2+) though it is worth noting that IE6 requires a background-color be set on the label to match the field background. Also, there’s a minor issue about the autocomplete function, which I suggest you read about in their documentation.

32 285x175 9 Highly Useful Form & Validation jQuery Plugins

Download1 (@Github), Download2 (.zip)

4. Sisyphus – Just like Gmail, this plugin periodically saves form entries while you’re composing messages. So when your visitors accidentally close the tab or browser while filling out your form, all the changes they made are restored once it’s reopened.

42 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo, Download1 (.zip), Download2 (.tar)

5. Smart Validate – This jQuery credit card validation plugin ensures that the user has entered a valid credit card number before making the actual transaction. It supports all major credit cards (American Express, Mastercard, Visa, Discover, Diners Club) but it can also easily be extended to support other credit cards as well.

52 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo, Download (.zip)

6. MotionCAPTCHA – Now this is a totally different approach in verifying human interaction. jQuery CAPTCHA is a plugin that requires users to sketch the shape they see in the canvas instead of typing a series of random text in order to submit a form.

62 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo

7. Power PWChecker – This is a free jQuery plugin that helps users determine the strength of their password. This plugin can be integrated seamlessly with any online form and it also gives users hints on creating more secure passwords.

72 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo

8. DropKick – This extremely light plugin lets you easily create custom dropdown menus. It also degrades gracefully for visitors on older browsers. It even works on IE7 and 8!

81 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo, Download (.zip)

9. TagBox Plugin – This jQuery plugin helps the user add tags like input in your forms.

92 285x175 9 Highly Useful Form & Validation jQuery Plugins

Demo, Download (.zip)

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/9-highly-useful-form-validation-jquery-plugins/feed/ 0 Valid8 – Feature Rich Form Validation Plugin For jQuery http://blogfreakz.com/jquery/valid8-feature-rich-form-validation-plugin-for-jquery/ http://blogfreakz.com/jquery/valid8-feature-rich-form-validation-plugin-for-jquery/#comments Sun, 10 Apr 2011 03:25:46 +0000 Mufti Ali http://blogfreakz.com/?p=18522 Valid8 is form validation plugin for jQuery that features support for three types of validation techniques; Regular expressions, custom javascript functions and Ajax requests. The three techniques can be combined in any way you want. For example, in a very extreme case, you can use two regular expressions, one javascript function and three ajax requests for validating a single input field.

valid8 Valid8 Feature Rich Form Validation Plugin For jQuery

Valid8 ranges from super simple ‘making an input field required’ to an near endless possibility of complexity. To implement Valid8 is pretty simple, for example, calling the valid8 method without any arguments will show the default validation error message ‘Required’ if the input field is left empty. Other example is by calling the valid8 method with a string as an argument will show the string as an a validation error message if the input field is left empty.

Requirements: jQuery Framework
Demo: http://unwrongest.com/projects/valid8/
License: MIT License

Incoming search terms for the article:

]]> http://blogfreakz.com/jquery/valid8-feature-rich-form-validation-plugin-for-jquery/feed/ 0 Snow – A Slick And Modern Web UI Kit http://blogfreakz.com/form/snow-%e2%80%93-a-slick-and-modern-web-ui-kit/ http://blogfreakz.com/form/snow-%e2%80%93-a-slick-and-modern-web-ui-kit/#comments Sat, 02 Apr 2011 06:03:33 +0000 Mufti Ali http://blogfreakz.com/?p=18178 This set of user interface elements was created specifically for light, modern websites and applications. Each of these elements will fit beautifully with subtle textured or solid backgrounds, making your site rich with design elements and beauty.

snow ui kit Snow – A Slick And Modern Web UI Kit

Each individual element has been hand-crafted with attention to detail for a truly pixel perfect result, and all layers are grouped and organized for ease of use. This UI kit was designed for spyrestudios by MediaLoot.

Website: http://spyrestudios.com/freebies/snow-modern-ui-kit/

Incoming search terms for the article:

]]> http://blogfreakz.com/form/snow-%e2%80%93-a-slick-and-modern-web-ui-kit/feed/ 0 jFormer – jQuery Form Framework http://blogfreakz.com/jquery/jformer-jquery-form-framework/ http://blogfreakz.com/jquery/jformer-jquery-form-framework/#comments Sat, 05 Mar 2011 08:29:54 +0000 Mufti Ali http://blogfreakz.com/?p=17175 jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that validate client-side, validate server-side and without changing pages (using AJAX).

jformer 600x250 jFormer – jQuery Form Framework

Features

  • Painless form validation
  • Easily customizable using CSS
  • User controlled field duplication
  • Bot prevention (no need for CAPTCHAs)
  • Users can save and resume forms
  • Form triggers lock or unlock form fields
  • One file for form generation and processing
  • Templates for common forms

At 18K gzipped, jFormer is one of the first frameworks that comes closure compiled with Google’s latest JavaScript compression technology.

Requirements: jQuery Framework
Demo: http://www.jformer.com/
License: MIT , GPL License

Incoming search terms for the article:

]]> http://blogfreakz.com/jquery/jformer-jquery-form-framework/feed/ 2 Textarea Counter Plugin for jQuery http://blogfreakz.com/jquery/textarea-counter-plugin-for-jquery/ http://blogfreakz.com/jquery/textarea-counter-plugin-for-jquery/#comments Tue, 28 Dec 2010 04:23:44 +0000 Mufti Ali http://blogfreakz.com/?p=13951 Textarea Counter is plugin for jQuery that allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events. The extra div is displayed under the textarea, which shows the current number of input characters and words.

character counter Textarea Counter Plugin for jQuery

You can set your own styles and customise the text counter information. You can also easily define the maximum number of characters by maxCharacterSize. If number of characters of user input is over the warning number, the information style will be changed to warning style.

Demo : http://roy-jin.appspot.com/jsp/textareaCounter.jsp
Download : http://roy-jin.appspot.com/jsp/textareaCounter.jsp
License : MIT License

Incoming search terms for the article:

]]> http://blogfreakz.com/jquery/textarea-counter-plugin-for-jquery/feed/ 0