Form validation methods

From my experience, I already use 3 main type of method to validate a form. Purpose of form validation is to prevent spamming, injection and empty message. In addition, this will make our form more friendly, safe and interactive.


Method is use :

1. JavaScript validation.
Integrated on the form web pages, refuse the submit form if the required fields is empty or out of criteria. This will pop-up a message window. We can this, on web page validation.

2. PHP script validation.
Add-on some validation script on the PHP file which processing the form output and send the mail. Then, redirect user to the corresponding page. We can say, this is on server validation.

3. Using captcha.
This method required user to fill some validation code to continue sending the form. Now a days, there was a lot of type of captcha. You can built and customised you own captcha or use free recaptcha. E.g: Recaptcha - Stop spam. Read books. We can say, this is a complete solutions for form validation; on web page and on server validation.


Next, I'll write a simple tutorial about applying this three methods of validating  a form.
Have a nice day!

Write by Arafa Daming

Google new feature - +1 (Plus one)

Google has lunch new feature to compete Facebook Like Button named +1 (Plus One) button. This feature automatically integrated on my blog. You also can customized it's position on your blog. It also available as a WordPress Plugin.

You can view +1 button FAQ here

This is short explanation of +1 button by Google :

+1 is as simple on the rest of the web as it is on Google search. With a single click you can recommend that raincoat, news article or favorite sci-fi movie to friends, contacts and the rest of the world. The next time your connections search, they could see your +1’s directly in their search results, helping them find your recommendations when they’re most useful.

Have a try!

Write by Arafa Daming

Enabling HTML5 on Internet Explorer (IE) with javascript

Create new HTML5 elements for Internet Explorer (IE) using javascript. Save this script as a javascript(e.g: html5.js) and include in your web pages.

This script should load before any others. We want the new elements to be parsed before pretty much anything happens.

document.createElement("article");
document.createElement("aside");
document.createElement("audio");
document.createElement("canvas");
document.createElement("command");
document.createElement("datalist");
document.createElement("details");
document.createElement("embed");
document.createElement("figcaption");
document.createElement("figure");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("keygen");
document.createElement("mark");
document.createElement("meter");
document.createElement("nav");
document.createElement("output");
document.createElement("progress");
document.createElement("rp");
document.createElement("rt");
document.createElement("ruby");
document.createElement("section");
document.createElement("source");
document.createElement("summary");
document.createElement("time");
document.createElement("video");


Example :

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->

This is very usefull if you want to develop a HTML5 web pages.
Have a nice day!

Write by Arafa Daming

Make a simple rounded button with CSS

Minimizing the image usage on our web page is to reduce our page size and become easily to load. Usually, we are using an image as a fancy button. Now, with CSS3 new features, we can reduce images on our pages.

Example:

I'm a button

HTML code:

<a href="#" class="mybutton" title"I am a button">I'm a button</a>
CSS code:
 .mybutton  {
    border-right:1px solid #25839a;
    border-bottom:1px solid #25839a;
    padding:0px 16px;
    color:#fff;
    font-size:18px;
    line-height:38px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background:#ff6117;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-decoration:none;


Hover code (Optional) :
 .mybutton:hover  {
    background:#6d777e;
    border-right:1px solid #6d777e;
    border-bottom:1px solid #6d777e;
    }


Write by Arafa Daming

All type of error page.

Do you always see some numbers which you do not understand when browsing some website?

Let's see what does each of these numbers means.

Client Request Errors
400 - Bad Request
401 - Authorization Required
403 - Forbidden
404 - Not Found
405 - Method Not Allowed
406 - Not Acceptable (encoding)
407 - Proxy Authentication Required
408 - Request Timed Out
409 - Conflicting Request
410 - Gone
411 - Content Length Required
412 - Precondition Failed
413 - Request Entity Too Long
414 - Request URI Too Long
415 - Unsupported Media Type


Server Errors
500 - Internal Server Error
501 - Not Implemented
502 - Bad Gateway
503 - Service Unavailable
504 - Gateway Timeout
505 - HTTP Version Not Supported


Write by Arafa Daming