jValidator - A jQuery Plugin

Download

Techs Used

Screen Shots

See it in Action

None Yet. Be the first!

Overview

jValidator was designed to provide an easy way for anyone to validate a simple form. It comes preloaded with many different validation options including names, phone numbers, E-mail and more!

The download for jValidator has a simple PHP script that will email you user data when someone fills out the form on your site. If you decide to use this, make sure you change the E-mail address in the php file.

This plugin uses a colored border to alert the user if a field in invalid. You can changed these colors by simple changing the color values for the .invalid and .valid classes in your CSS.

Example

The HTML Markup (you must have a div surrounding the form):

<div>
  <form id="contact-form" action="submitform.php"> 
    <label>Name:</label><input type="text" name="Name" validate="name"><br/> 
    <label>Email Address:</label><input type="text" name="Email" validate="email"><br/> 
    <label>Comments /<br>Questions:</label><textarea name="Comments" validate="name" rows="5" cols="35"></textarea> 
  </form>
</div>

Then activate the plugin:

$(function()
{
  $("#form").jValidator();
});

And make sure you set the needed CSS classes:

.invalid{border:2px solid red;}
.valid{border:2px solid green;}