In this tutorial, i am going to show how easy to validate a form with jquery. For this you will need to download

JQuery Library ...]]> Quick & Easy Form Validation with JQuery

Form validation has become never been easy like before. If you havent heard of jQuery, then its time to get know now. Jquery is an open source set of javascript library, that brings user interactivity in web applications so easy even for a beginner with just few lines of code.

In this tutorial, i am going to show how easy to validate a form with jquery. For this you will need to download

JQuery Library – http://jquery.com
JQuery form validation plugin – http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Lets say we are going to validate a registration form like shown below..

Step 1:

Place the javascript files within the head section

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
    $("#registerForm").validate();
  });
</script>
</head>

You should set the name and id of your html form same as $(“#registerForm”).validate();

Step 2:

For each required form element just place class=”required” and specify minlength tag inside it. For example

Name field -> class=”required”
Email field -> class = “required email”

<input name="name" type="text" id="name" class="required">
<input name="user_id" type="text" id="user_id" minlength="4">
<input name="user_email" type="text" id="user_email" class="required email">

Thats it! you will be able to validate form field textboxes without any advanced code.
For optional fields, you can specify class=”optional” or just leave it.

Step 3

In this last step you will add some styles to the error messages in the stylesheet.

.error {
	font: normal 10px arial;
	padding: 3px;
	margin: 3px;
	background-color: #ffc;
	border: 1px solid #c00;
}

Thats it! see how the validation works like a charm..

Advanced Validation

The following are some of bit advanced validation code that might help you.

To check password and password retype are same

   <tr>
      <td>Password</td>
      <td><input name="pwd" type="text" id="pwd" class="required" minlength="5"></td>
    </tr>
    <tr>
      <td>Retype Password</td>
      <td><input name="pwdc" type="text" id="pwdc" class="required" equalTo="#pwd"></td>
    </tr>

To validate a website URL – optional field
It should check the URL and force the user to enter full url with http.

 <tr>
            <td>Website </td>
            <td><input name="web" type="text" id="web2" class="optional defaultInvalid url">
              <span class="example">http://www.example.com</span></td>

          </tr>

To validate Phone Number

We dont want restrict phone numbers to be US only. Suppose if a foreign person enters a phone with + and dashes, we want that as well. To do this you will need to make slight change inside document.ready() in head section.

<script>
  $(document).ready(function(){
    $.validator.addMethod("NumbersOnly", function(value, element) {
        return this.optional(element) || /^[0-9\-\+]+$/i.test(value);
    }, "Phone must contain only numbers, + and -.");

    $("#regForm").validate();
  });
  </script>

and now you can validate specifying class=”required NumbersOnly”. This will allow only numbers 0-9, hyphen and + for country code.

    <tr>
      <td>Phone</td>
      <td><input name="phone" type="text" id="phone" class="required NumbersOnly"></td>
    </tr>

Validating Username with no special characters

We dont want username to contain any special characters like dot,slashes etc. We only want to allow alphabets, numbers and underscore.

We create a function similar way like above

<script>
  $(document).ready(function(){
    $.validator.addMethod("username", function(value, element) {
        return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
    }, "Username must contain only letters, numbers, or underscore.");

    $("#regForm").validate();
  });
  </script>

and now you can call using class=”required username”

<tr>
<td>User ID</td>
<td>
<input name="user_name" type="text" id="user_name" class="required username" minlength="4">
</td>
</tr>

Enjoy jQuery!

I went through the documentation of the plugin and there was no such methods to strip the special ...]]> JQuery form validation – How to remove special characters!

i was using a jquery form validation plugin and it was so easy in validating a form. I was stuck in a scenario where i want users to register userID and i dont want them to enter special characters like dots and just want them to enter alphabets, number and underscore in the username.

I went through the documentation of the plugin and there was no such methods to strip the special characters in the plugin.

Finally, i somehow got hold of the code that does the job through regular expression regex that checks for only numbers and a-z

  <script>
  $(document).ready(function(){

      $.validator.addMethod("noSpecialChars", function(value, element) {
        return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
    }, "Username must contain only letters, numbers, or underscore.");

    $("#myForm").validate();
  });
  </script>

All you have to do is call this function from the textbox element. Dont forget to check out the example of addMethod()

//call this from html code within class=required
<input id="cname" name="name" size="25" class="required noSpecialChars" minlength="2" />

Works like a charm!

Lets say you have a button refresh all, which basically does reloading the page when you click it. Here is the code

This is really very frustrating as everytime i click a link, the browser jumps to top of page. After a long search, i fixed the problem by ...]]> JQuery onclick jumps to top of page

i had an issue with jquery code where i have a html link doing specific tasks for onclick event. Since the appear on bottom of my page, when i click on the link the browser jumps to top of the page every time i click.

<a href="#" onclick="dofunct()">click me</a>

This is really very frustrating as everytime i click a link, the browser jumps to top of page. After a long search, i fixed the problem by replacing # with javascript void function.

<a href="javascript:void(0);" onclick="dofunc()">click me</a>

It neatly solved my jump problem!

jQuery has revolutionized the way we look at javascript and it has certainly bridged the javascript(client side) and php (server side).

so how do you ...]]> how to call a php script from javascript?

I have always wondered how to call a php script and send GET data from javascript code. It was very important for me as in many projects i have worked i never wanted to header redirect to original php page after delete, edit operations which is really a mess.

jQuery has revolutionized the way we look at javascript and it has certainly bridged the javascript(client side) and php (server side).

so how do you call a php script from javascript?

i am going to show how with just one line of javascript code, you can send GET data to php script and get the output from php script show in javascript inside span or div.

A simple example would be a form registration checking for user availability.

Logic is simple.you call a php script upon clicking check availability and javascript onClick event fires and the php script returns the data with “available” or “not available”. i have used jquery here.

Take a look at onclick event.

<td><input name="user_name" type="text" id="user_name" class="required">
              <input name="btnAvailable" type="submit" id="btnAvailable"
			  onclick='$.get("checkuser.php",{ cmd: "check", user: $("#user_name").val() } ,function(data){ $("#checkid").html(data); });'
			  value="Check Availability"> <span style="color:red; font: bold 12px verdana; " id="checkid" ></span>
            </td>

This single line of code sends GET data to check.php?cmd=check&user=demo. Isnt that wonderful? Havnt we bridged php and javascript.

Here is some explanation.

checkuser.php -> name of php script to call
cmd,user -> GET parameters
$("#user_name").val() -> Gets text box value with id user_name;
$("#checkid").html(data); -> Shows the output of php script within a span

Hope this helps!

There is a way to check whether the images have been loaded or not in javascript. Using the Image() object is a good method to cache large images.

You can use onload function to trigger a ...]]> how to check if image loaded or not in javascript?

If you are having a webpage with large sized images, you would notice the browser taking long time to load those images and showup. A good idea would be show a loading animation until large photos load.

There is a way to check whether the images have been loaded or not in javascript. Using the Image() object is a good method to cache large images.

You can use onload function to trigger a event after loading is complete.

objImg = new Image();
objImg.src = 'photo.gif';
objImg.onload = function() {
                           /// do some work;
                        }

Another way of checking is use complete property

objImg = new Image();
objImg.src = 'photo.gif';

if(!objImg.complete)
 {
        /// do other work;
             }

Hope this helps if you are a javascript programmer.

One important thing to note is, your div should have loaded after all the images. If not it wont work.

Please note that some of the editors are just markup editors, which i believe a pretty good alternative to web applications needing lightweight editor. I very much prefer using markup editors keeping simple with just textarea than ...]]> Best WYSIWYG HTML Editors

I have been searching for some of best web based html editors written in javascript so that i can integrate it with my scripts. I have found pretty nice open source wysiwyg editors so i decided to blog it here.

Please note that some of the editors are just markup editors, which i believe a pretty good alternative to web applications needing lightweight editor. I very much prefer using markup editors keeping simple with just textarea than providing rich text environment because wysiwyg tend use iframes which are subjected to more vulnerabilities.

TinyMCE

Web based Javascript HTML WYSIWYG editor.

License: Free (LGPL)

Homepage | Download

NicEdit

A fast loading WYSIWYG html editor for use in your web applications.

License: Free (MIT license)
Homepage | Download

OpenWebWare

Powerful WYSIWYG html editor supports many cross browser platforms and it works replacing all textareas to html editor.

License: Free (GNU Lesser License)
Homepage | Download

widgEditor

It is a simple, easy to customize WYSIWYG editor for textarea replacement.

License: Free (GNU GPL)
Homepage | Download

Textarea HTML Markup Editor

It is the lightweight and very fast loading editor, which just inserts html markup codes on the selected text. It is not WYSIWYG editor.

License: Free
Homepage | Download

WyZZ

An small, light-weight html editor written in javascript. It is free for download.

License: Free (LGPL)
Homepage | Download

markItUp!

Universal markup editor (not WYSIWYG) which can insert html, bbcode, textile, wiki syntax and many more markups. It is written with jQuery library

Licence: Free under MIT/GPL
Homepage | Download

Kevin Roth RTE (Rich Text Editor)

A cross browser rich text editor works in mozilla, IE, safari, opera and many browsers.

License: Free (Creative commons)
Homepage | Download

Hypertextarea

Free WYSIWYG html editor with rich text environment. It works on any platform.

License: Free
Homepage | Download

SPAW Editor

License: Free (GNU GPL)
Homepage | Download

WYMeditor

Web based xhtml editor works best and can be easily integrated to content management system applications.

License: Free (GPL/MIT)
Homepage | Download

Whizzywig

Free web based rich text editor for your projects.

License: Free
Homepage | Download

ST Editor

Simple wysiwyg editor and light weight editor.

License: Free (BSD Revised)
Homepage | Download

For a comprehensive list of wysiwyg editors, you can refer to Genii Web Editors list

This is a very annoying problem and everytime you have to scroll down to insert changes to your textarea content.

Here is you fix it.

Store ...]]> I was working on a javascript bbcode editor (textarea based) and often if the textarea contents are long and automatic scrollbars are enabled. If i replace selected code in textarea using javascript often the cursor jumps to start of the textarea and focus is lost. This problem only happens in firefox and works fine in IE.

This is a very annoying problem and everytime you have to scroll down to insert changes to your textarea content.

Here is you fix it.

Store the scroll position in a variable and you replace selected text, bring back the scroll to the original position. This 3 lines of code will solve the problem for firefox.

var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

objTextarea.scrollTop = scrollTop;
objTextarea.scrollLeft = scrollLeft;

I struggled a lot get this fix for simplest of problems and it was less documented on the web.
Hope this helps!

Much of the inspiration of this editor came from the editor used in wordpress forums. I really loved the simplicity of the editor used there. The reason i ...]]> A dead simple, fast loading, light weight and easy to use html markup editor for your projects. It is the ultimate textarea replacement. It does not use iframes instead it just replaces textarea into an editor where you can insert basic html markup codes like bold, italic, hyperlink, image, blockquote and more..

Much of the inspiration of this editor came from the editor used in wordpress forums. I really loved the simplicity of the editor used there. The reason i kept as textarea editor instead of using iframes (which gives rich html) is because iframe based editors are subjected too many injection attacks.

Features

- Inserts HTML codes in textarea
- No iFrames
- Fast loading and lightweight (code just under 2kb)
- Works on all major browsers
- No popup html window for inserting hyperlinks.
- Easy to integrate
- Inserts quick html code
- Inserts ordered and unordered lists (new feature)

Demo

Download (5kb)

This editor is 100% FREE and feel free to use this editor in your projects or do whatever you want. Please spread word by any means possible.

Note:This editor inserts html code. If you want a same editor, capable of inserting bbcode, you can download free bbcode editor

Free Icons

If you want to customize the editor with new icons you can download silk icons set. It is free!

How to Install

1. Just extract the folder and upload editor folder to your server. All the editor code and images are inside that folder. You should not run any php scripts inside this folder. Any html or php script calling this editor must above and outside this folder

2. Create a PHP script or html page (ex: example.php ) and initialize the editor with the below code.

Starting the Editor

To initialize the editor, you have insert the following lines

1. Place this code inside the of the html page inside head tag.

<script type="text/javascript" src="editor/ed.js"></script>

2. Place this 2 lines of code within the form or wherever you want the textarea editor to appear. The name and id of textarea could be anything, just make sure that both are same.

....
<script>edToolbar('mytxtarea'); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed"></textarea>

.....

Note: Make sure that the id value and the value inside of edToolbar () is same.

If you want multiple instances of editors, on same page

<form name="form1" method="post" action="">
  <p>
    <script>edToolbar('mytxtarea'); </script>
    <textarea name="mytxtarea" id="mytxtarea" class="ed">This is a sample text</textarea>
  </p>
    <p>
    <script>edToolbar('mytxtarea2'); </script>
    <textarea name="mytxtarea2" id="mytxtarea2" class="ed">This is a sample text</textarea>
  </p>
    <p>
    <script>edToolbar('mytxtarea3'); </script>
    <textarea name="mytxtarea3" id="mytxtarea3" class="ed">This is a sample text</textarea>
  </p>

  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

The default height and width of text area is specified in styles.css. It is 400px width and 150 height. You can open styles.css and modify the width and height of text area.

Frequently Asked Questions

1. How do i customize the editor with stylesheet?

It is easy to customize the images and editor with stylesheet. Just change stylesheet code in styles.css

2. Images does not appear or does not load.

There could be a problem in the path of images the editor relative to your PHP script. Just place the bbeditor folder below / assuming that php script is in /example.php and the editor is /bbeditor/images

if you want to manually change the path of images, open ed.js and you will need to change lines like this indicating the correct path of images.

document.write("<img class=\"button\" src=\"editor/images/bold.gif\" name=\"btnBold\" onClick=\"doAddTags('<strong>','</strong>')\">");
.....

3. How do i load the data stored in database to the editor for editing?

This is a very important question. Suppose you have inserted the content with bbcodes to the database but what if you want to make changes to the content. You might want to pull the content from database and load it in editor to make editing and changes to it. In that case you will need to output the javascript initialization with php. In this way you will load the content when the editor starts.

<form name="form1" method="post" action="">
  <p>
<script>edToolbar('mytxtarea'); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed">//PHP CODE HERE//</textarea>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

Disclaimer: use of this script is at your own risk.

You can also discuss about this script in my forum. Although i cannot provide support because of my busy schedule, i would be happy to discuss in the forum.

Enjoy the editor!

Our 650-621 practice questions are more then simple 70-236 test prepared to help you assess your real knowledge for 70-270 exam.