Form Validation with Javascript and PHP

Form Validation with Javascript and PHP

32 119185
Form Validation with Javascript and PHP
Form Validation with Javascript and PHP

Form Validation with Javascript and PHP

In this tutorial, we will show you how to create an attractive, pleasant to look form for your website, and then we will explain how to dynamically validate it using Javascript. The server-side validation with PHP will be covered too (to make everything 100% safe). This tutorial will help you to add more functionality to your forms that leads to better user experience and better website quality. You may also enhance your already existing forms with adding some fancy effects that are presented in this tutorial. Let us get started! Info: If you’d like to modify your existing forms, skip the HTML and CSS sections of this tutorial and go ahead to step number five. Otherwise, if you’re planning to create a new form, start reading since the beginning.

Concept

Let’s start with some brief explanation of what are we going to do. I’m sure that you have already seen a lots of different forms and you already noted that filling in some of them was much more convinient than filling in other ones. By and large, good ones were enhanced with additional scripts. We are going to cover several field types including standard input field, password field, repeat password field, email field, options list and few different js scripts. We hope that you’ll find here something useful for you. There are several things to consider before you creating forms:

  • Make sure that your form is as short as possible. People don’t like wasting time on filling in complex (and long) forms. They are likely to leave the page before they take any action. It’s better to require for less important information after user is already joined (preferably, only when you really need that information).
  • We want it to look neat and clean.
  • We want it to work seamlessly and without any strange behavior or errors.
  • We want to reduce number of fake submissions.
Live Demo

Project

We’re going to start with HTML and then improve it with styles and scripts. At the end we’re going to use the following fields in my form (numbers of allowed chars are in the brackets):

  • Name (25)
  • Password (25)
  • Password Confirmation (25)
  • Email (50)
  • Gender (boolean)

This is the plan: the best way to make each part is to start with HTML and then improve it by adding some style and scripts but you can actually start with preparing database (because you may have your own DB structure) or PHP script (step 12) and then, take care of the other steps. Tip: You always can increase maximum size of your text fields (it you need).

Step 1 – HTML Forms

Let’s prepare a new folder ‘templates’, where we will put all our html templates. Create a new document and name it ‘main_page.html’. Now we’re going to create a new HTML form and put it here. As you can see below, there are some comments referring to each part of my code, so I believe that at this point additional explanations are superfluous. I have also created a HTML table to align all the information. Here is the code:

templates/main_page.html

<form action="index.php" method="post" id="form" onsubmit="return validate_all('results');">
    <table cellspacing="10">
        <tr><td>Login</td><td><input type="text" name="login" maxlength="25" id="login" onKeyUp="updatelength('login', 'login_length')"><br /><div id="login_length"></div> </td></tr>
        <tr><td>Password</td><td><input type="password" name="pass" maxlength="25" id="password" onKeyUp="updatelength('password', 'pass_length')"><div id="pass_result"></div><br /><div id="pass_length"></div></td></tr>
        <tr><td>Confirm Password</td><td><input type="password" name="cpass" maxlength="25" id="c_password"></td></tr>
        <tr><td>Gender</td><td><select name="gender"><option value="1">male</option><option value="0">female</option></select></td></tr>
        <tr><td>Email</td><td><input type="text" name="email" maxlength="50" id="email" onKeyUp="updatelength('email', 'email_length')"><br /><div id="email_length"></div></td></tr>
        <tr><td colspan="2"><input type="submit" name="submit" value="Register"></td></tr>
    </table>
    <h3 id="results"></h3>
</form>

Things to note:

  • Don’t forget to name your text fields, otherwise you won’t be able to receive data from them later on.
  • Maxlength parameter reduces number of characters you can use in each text field.
  • Action, method and id parameters are required so place them into form tag.
  • You can make table border visible by placing border=”1″ in table tag if you want to actually see the table.

Here’s the code of second page:

templates/step2.html

<h2>{errors}</h2>
<form action="index.php" method="post">
    <table cellspacing="10">
        <input type="hidden" name="login" value="{login}">
        <input type="hidden" name="pass" value="{pass}">
        <input type="hidden" name="cpass" value="{cpass}">
        <input type="hidden" name="gender" value="{gender}">
        <input type="hidden" name="email" value="{email}">
        <tr><td><span>Verification code</span></td><td><input name="vcode"></td><td></td></tr>
        <tr><td><span>Hint</span></td><td><i>{vcode}</i></td><td></td></tr>
        <tr><td colspan="2"><input type="submit" name="submit" value="Register"></td></tr>
    </table>
</form>

And – last one page:

templates/step3.html

<h1>Registration complete</h1>

Step 2 – Adding CSS

Now we have our HTML form but it does not look attractively yet. As you may have guessed it is time to add some CSS and make our form look a little better. Here is my example of green form definitions:

css/main.css

form {
    background-color: #555;
    display: block;
    padding: 15px;
}
input[type=text], input[type=password], input[type=submit] {
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
input[type=text], input[type=password], select {
    background-color: rgb(246, 254, 231);
    border-color: rgb(180, 207, 94);
    border-style: solid;
    border-width: 1px;
    font-size: 16px;
    height: 25px;
    margin-right: 10px;
    width: 200px;
}
input[type=submit]{
    cursor: pointer;
    font-size: 16px;
    height: 35px;
    padding: 5px;
}
input.wrong {
    border-color: rgb(180, 207, 94);
    background-color: rgb(255, 183, 183);
}
input.correct {
    border-color: rgb(180, 207, 94);
    background-color: rgb(220, 251, 164);
}
#pass_result {
    float: right;
}

Classes are named according to their further function. For example .wrong class will be used when text field contains wrong informations and so on. Also you should now add class parameter to each text field and elements that should have some style. To do it place class=”class_name_here” to input tags where class_name_here is name of class defined between style tags (see example if you are new to adding classes to elements). Add only field class to each text field, rest will be used later. I advise to modify styles a little by choosing different colors and values so that they could fulfill your requirements.

Step 3 – Javascript

This step will be about dynamic elements and how to use Javascript to create and then apply them wherever you would like to. After observing what some sites do I’ve noticed that there are plenty of such scripts (which I’m going to present here) recently, especially on big companies/corporations sites and popular services so I think this really make users happier and encourage them to fill forms in. Look around and check out some sign up forms (Google.com, Yahoo.com and flickr.com, ebay.com… yes, dynamic forms are almost everywhere now). Some easy to do scripts can reduce number of unnecessary clicks and let users create account (or whatever you are making form for) more quickly than before, not to mention they look much more prettily and cool. There are various places to put the javascript code as it was with CSS. It can either be written inside the main_page.html file using a tag or put to the other file and then include this file to main_page.html. Both case will use the same code to put scripts to your document. I chose second option so make separated script file (js/script.js) for our main_page.html file.

Each function from further steps should be placed where I made comment so between.

Step 4 – Applying functions

This is very important step so read it carefully. Adding javascript functions to your HTML form elements should be easy because it is very similar to adding CSS classes to them. Also to make it easier I tried to create functions from further steps alike to each other so that you can apply them almost the same way but for sure I will add some sample files each step to show you how it is made and I will write a little explanation to them. Generally if you want to add function (let’s say updatelength() from Step 7 – Counter) to login field you should replace:

    <input type="text" name="login" maxlength="25" id="login">

with:

    <input type="text" name="login" maxlength="25" id="login" onKeyUp="updatelength('login', 'login_length')"><br /><div id="login_length"></div>

The only thing that has changed is onKeyUp=”updatelength(‘logid’, ‘login_length’)” was added. Well, if we add something like this to our input we will observe what function is returning outcome in div tag with id “login_length”.

Why?

Because updatelength() function starts like this “function updatelength(field, output){…” (Step 7 – Counter) and that means it requires two arguments which are ID OF TEXT FIELD IN HTML and ID OF DIV WHERE RESULT WILL BE. Now it is easy, isn’t it? :) Rest of functions are similar to this one so I hope it won’t be a problem to apply it. Each one needs almost same values as arguments.
Notes:

  • You can use more than one function to one text field by using a separator “;”. Example: onKeyUp=”updatelength(‘logid’, ‘login_length’); valid_length(‘logid’, ‘login_o’);”
  • Look up to the source of example sites if you have any problems.

Step 5 – Counter

So, here goes first script to improve our sign up form. It can be used in many other cases like adding a comment or posting message somewhere so you can attach it to more than one form. It will count characters we typed and tells us how many more we can write to the end of field. Short code and useful thing:

function updatelength(field, output){
    curr_length = document.getElementById(field).value.length;
    field_mlen = document.getElementById(field).maxLength;
    document.getElementById(output).innerHTML = curr_length+'/'+field_mlen;
    return 1;
}

Once you have placed it, you can run it using method presented in previous step (also there is example of usage described). This script checks how many characters did you use (each time you use one) and how many are allowed by text field’s maxlength parameter, then it changes value between the div tags. There are 2 variables called ‘curr_length’ and ‘field_mlen’. First one gets and store number of characters you’ve typed (as I already wrote each time you type something in the field) and second one stores value of maxlength parameter of the field on which you are using this function. Then it simply shows both values with ‘/’ separator in the middle. Note:

  • I applied this script to every field

Step 6 – Password Strength

Now it will be something which will check for how strong the password is. Scripts like this are usually not very extended so here is the basic version of it:

function check_v_pass(field, output) {
    pass_buf_value = document.getElementById(field).value;
    pass_level = 0;
    if (pass_buf_value.match(/[a-z]/g)) {
        pass_level++;
    }
    if (pass_buf_value.match(/[A-Z]/g)) {
        pass_level++;
    }
    if (pass_buf_value.match(/[0-9]/g)) {
        pass_level++;
    }
    if (pass_buf_value.length < 5) {
        if(pass_level >= 1) pass_level--;
    } else if (pass_buf_value.length >= 20) {
        pass_level++;
    }
    output_val = '';
    switch (pass_level) {
        case 1: output_val='Weak'; break;
        case 2: output_val='Normal'; break;
        case 3: output_val='Strong'; break;
        case 4: output_val='Very strong'; break;
        default: output_val='Very weak'; break;
    }
    if (document.getElementById(output).value != pass_level) {
        document.getElementById(output).value = pass_level;
        document.getElementById(output).innerHTML = output_val;
    }
    return 1;
}

As a ‘field’ argument we should put an ID of field to check and in ‘output’ goes place where the result will be shown. Of course DON’T TYPE IT HERE but when you are using this function (here you are only creating it) so replace values only when you write OnKeyUp="… in your input :). Function also here contains two variables. First one called ‘pass_level’ contains current password strength and it is set to 0 by default because password field is empty at the beginning. Second variable named ‘pass_buf_value’ contains current value of your password field. Below those two you can see some if()-s, they are looking for some characters that may increase password strength level and if one of them find anything it updates value of ‘pass_level’ variable by adding 1 to it. Of course rest of the script returns proper informations, it chooses right text depending on current ‘pass_level’ value. Apply this script to your password field.

Step 7 – Comparing passwords

Third script compare value from password field with value from confirm password field to make user sure, he typed exactly what he wanted. Characters here are not visible so to check if user did not make any mistakes we need two different fields and both has to contain same values when typing, only then form is filled correctly:

function compare_valid(field, field2) {
    fld_val = document.getElementById(field).value;
    fld2_val = document.getElementById(field2).value;
    if (fld_val == fld2_val) {
        update_css_class(field2, 2);
        p_valid_r = 1;
    } else {
        update_css_class(field2, 1);
        p_valid_r = 0;
    }
    return p_valid_r;
}

Guess how to use it? Only tip I will give you is that you should use it only on the compare password field and nowhere else. Well, this script as you can see arrogates values of 2 fields to two different variables called ‘fld_val’ and ‘fld2_val’. There is an if() construction below them which compares those two values and changes between 2 versions of style (green when everything is good and red when there are any errors).

Step 8 – Email verification

A bit more complicated script but usage is easy as always. Every email address must fulfill following criteria:
1. Must have some characters at the beginning (letters or numbers (and some less important))
2. Must have @ (at) character
3. Must have domain name
a) Must have first word
b) Must have . (dot) character
c) Must have second word
4. And in the event that somebody believe his email address contains big letters it must convert characters to small ones

function check_v_mail(field) {
    fld_value = document.getElementById(field).value;
    is_m_valid = 0;
    if (fld_value.indexOf('@') >= 1) {
        m_valid_dom = fld_value.substr(fld_value.indexOf('@')+1);
        if (m_valid_dom.indexOf('@') == -1) {
            if (m_valid_dom.indexOf('.') >= 1) {
                m_valid_dom_e = m_valid_dom.substr(m_valid_dom.indexOf('.')+1);
                if (m_valid_dom_e.length >= 1) {
                    is_m_valid = 1;
                }
            }
        }
    }
    if (is_m_valid) {
        update_css_class(field, 2);
        m_valid_r = 1;
    } else {
        update_css_class(field, 1);
        m_valid_r = 0;
    }
    return m_valid_r;
}

Place OnKeyUp="… into input tag where email address is and create new div with adequate ID to make it work. This function basically looks up if the email address is typed correctly. First it arrogates value of the field to ‘fld_value’ variable to work with it. Everything is supervised by 4 if() constructions. They are step by step checking if there is @ symbol (1), then if it is on the second or further position (2). At the end if there is "dot" character after @ symbol (3) and finally if there are any characters before and after this "dot" (4). If any of if()-a find error it stops script and switches to red style wrong style of field. Those if()-s are a bit complicated as you can see but finally result is same as always, it chooses between green and red style and then shows it. Second part of this script is similar to switching between two options in already explained part so it should be clear for now.

Step 9 – Empty fields

Short function checking if there is more than 0 characters in our inputs. If there are empty spaces somewhere we can’t create new account:

function valid_length(field) {
    length_df = document.getElementById(field).value.length;
    if (length_df >= 1 && length_df <= document.getElementById(field).maxLength) {
        update_css_class(field, 2);
        ret_len = 1;
    } else {
        update_css_class(field, 1);
        ret_len = 0;
    }
    return ret_len;
}

Like usually here also we have to give a text field ID and ID of div where result of script should be as an arguments. Add this script to each field (except gender one). This one has only one interesting part to explain because rest should be clear for you already. I’m talking about this long if() construction in the third line. It first checks if value of the field has at least one character and than in its second part if it has no more than ‘max number’ of characters. Then it just changes between two options – right and wrong.

Step 10 – Coloring

This one is very short and only changes mode between two classes to make better visual effects. Classes must be defined in our CSS part of document (they are if you copied definitions from step 4). I called them wrong and correct:

function update_css_class(field, class_index) {
    if (class_index == 1) {
        class_s = 'wrong';
    } else if (class_index == 2) {
        class_s = 'correct';
    }
    document.getElementById(field).className = class_s;
    return 1;
}

As you may have already noticed this function is ran by other ones. Previous and further scripts puts arguments here. First argument is an ID of field you are currently working with and second is number 1 or 2. This numbers are being changed depending on actual field status to let then change its style to correct one. Let’s continue to next step.

Step 11 – Last Javascript verification

This is the last script using javascript. It calls out every function once more for sure and returns encountered errors or allows us to continue. It does not require refreshing whole page but check form quickly after pressing "Register". That’s very important script and other ones were mostly make to let this one work:

function validate_all(output) {
    t1 = valid_length('login');
    t2 = valid_length('password');
    t3 = compare_valid('password', 'c_password');
    t4 = check_v_mail('email');
    t5 = check_v_pass('password', 'pass_result');

    errorlist = '';
    if (! t1) {
        errorlist += 'Login is too short/long<br />';
    }
    if (! t2) {
        errorlist += 'Password is too short/long<br />';
    }
    if (! t3) {
        errorlist += 'Passwords are not the same<br />';
    }
    if (! t4) {
        errorlist += 'Mail is wrong<br />';
    }
    if (errorlist) {
        document.getElementById(output).innerHTML = errorlist;
        return false;
    }
    return true;
}

This script to work must be added to your submission form. And don’t forget to put div tag with ‘results’ id somewhere so that there outcome could go (in my case it is at the bottom of form so below just made ‘button’). Once you press new button this function recalls other functions from previous steps and checks once more for any mistakes for sure. If everything is fine it let you create account but if something is wrong it shows errors there where you’ve placed your ‘div’ with ‘results’ ID. Also in this script you can define your own error messages.

Step 12 – Final verification

From now it will be mostly about PHP (and MySQL) so if you don’t want to make such a form on you website you can just leave it and use methods I showed in other situations :) Otherwise if you would like to store account data using MySQL database continue reading.
Javascript actually doesn’t protect our database from anything, it only makes people lifes easier :) If we want to be sure that filled form is 100% correct we must use PHP verification before we can add anything to our database – that is because if somebody will turn javascript off still he can write whatever he want while creating account and this may make database errors occurs. To add some very simply PHP script create index.php file which will be launched after pressing "Register" button. Well, here’s the code you should put to your index.php file:

index.php

<?php

// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

session_start();
if (isset($_POST['submit'])) {

    $sLogin = escape($_POST['login']);
    $sPass = escape($_POST['pass']);
    $sCPass = escape($_POST['cpass']);
    $sEmail = escape($_POST['email']);
    $iGender = (int)$_POST['gender'];

    $sErrors = '';
    if (strlen($sLogin) >= 1 and strlen($sLogin) <= 25) {
        if (strlen($sPass) >= 1 and strlen($sPass) <= 25) {
            if (strlen($sEmail) >= 1 and strlen($sEmail) <= 55) {
                if ($sPass == $sCPass) {
                    if (ereg('^[a-zA-Z0-9\-\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$', $sEmail)) {
                        if ($iGender == '1' xor $iGender == '0') {
                            $sVcode = escape($_POST['vcode']);
                            if (! isset($_SESSION['valdiation_code'])) {
                                // Here you can send him some verification code (by email or any another ways)
                                $sCode = uniqid(rand(), true);
                                $_SESSION['valdiation_code'] = md5($sCode);

                            } elseif (md5($sVcode) == $_SESSION['valdiation_code']) {
                                // Here you can add him to database
                                // mysql_query('INSERT INTO ....

                                // display step 3 (final step)
                                echo strtr(file_get_contents('templates/step3.html'), array());
                                exit;
                            } else {
                                $sErrors = 'Verification code is wrong';
                            }
                        } else {
                            $sErrors = 'Gender is wrong';
                        }
                    } else {
                        $sErrors = 'Email is wrong';
                    }
                } else {
                    $sErrors = 'Passwords are not the same';
                }
            } else {
                $sErrors = 'Address email is too long';
            }
        } else {
            $sErrors = 'Password is too long';
        }
    } else {
        $sErrors = 'Login is too long';
    }

    // display step 2
    $aParams = array(
        '{errors}' => $sErrors,
        '{login}' => $sLogin,
        '{pass}' => $sPass,
        '{cpass}' => $sCPass,
        '{gender}' => $iGender,
        '{email}' => $sEmail,
        '{vcode}' => $sCode
    );
    echo strtr(file_get_contents('templates/step2.html'), $aParams);
    exit;
}

// unset validation code if exists
unset($_SESSION['valdiation_code']);

// draw registration page
echo strtr(file_get_contents('templates/main_page.html'), array());

// extra useful function to make POST variables more safe
function escape($s) {
    //return mysql_real_escape_string(strip_tags($s)); // uncomment in when you will use connection with database
    return strip_tags($s);
}

Now, lets try to understand this. This script generally does EXACTLY the same what previous JS scripts did but it is launched on the server side to check everything once more. Continue reading to check how does it work.

So, please pay attention to all our checks, and – to added validation functional. When our form submitted, the next step will contain single field to accept some validation code. Of course, for our demo page you always can see that checking code. But, as some suggestion – I can offer you to enable email confirmation (as example). So, you have to add email sending to this code also. And, only after accepting that extra validation code (if this code was right) – only then allow member registration. Please read my comments carefully.


Live Demo

Conclusion

So that is all for now. In the final version I also added some classes which make table better positioned (stable) so make sure you’ve checked it out. While creating your own form you can expand it anyhow relying on what I wrote or try to use your imagination to create something better. Hope you enjoyed it. Good luck and welcome back!


32 COMMENTS

  1. Hi,

    nice article, but for the client side validation, I’m a big fan of jQuery validation plugin, you can master it in no time! Besides it’s from a guy that’s one of the core devs of jQuery itself.

    Oh, and good point about server validation, never (ever!) trust data that comes from the client (even if it’s supposed to be validated)

    • Yes, I can agree with you (about using jQuery), if you have jQuery at your website – you always can use something ready. If no – you can use own validation too.

  2. Thanks very much for you kind sharing! Your article really benefits me a lot. You not only tech me what to do, but also how to do and why to do such work. To tell the truth, I’m a beginner in Web Developing. It’s really fantastic learning experience!☺

  3. How does the php code get invoke as you do not specify a php function ?
    does it automatically invoke index.php
    what if your php validation is called something else.

    • Hi Phil,
      Why we didn’t specify it? please check our main form in templates/main_page.html – action attribute.
      actually, there are 2 validation levels: js (first) and php (second). If somebody was able to bypass first level, he will be faced with second level anyway.

  4. Hi i’m having some problems with the php aspect of the code…the javascript works perfectly but when i press register it just show the php code and doesn’t generate a validation code… not sure why it’s doing this

    • Hi Jean, I think that you should check, maybe your version has some JS errors? And, make sure that you execute this code on your localhost (not just from some certain folder without localhost)

  5. Oi gostei muito desse formulário, tem uns probleminhas que eu não estou conseguindo resolver que são: Toda vez que eu clico em REGISTER lá no topo aparece Email is wrong que em português significa: E-mail está errado, já que eu digitei outros campos de texto aparece Passwords are not the same que português significa: Senhas não são iguais.

    Eu queria que por favor você tem como fazer com esse código da postagem com os outros campos de texto:

    Tipo de inserção no banco de dados = O Admin do site poderá botar novos usuários para fazer postagens:

    Em todo Form eu queria que tivesse os seguintes campos: Usuário + Sexo do Usuário, Pixtar + sexo do pixtar, Email, Site, Tipo do usuário que são: Administrador,Moderador e Editor, e Senha com a confirmação. Eu queria que você também fizesse o código do Php para Inserir lá na minha tabela chamada PAINEL nos campos usuario, sexo, pixtar, sexo2, email, site, senha, tipo, e que você tirasse esse negocio de ir para outra pagina colocar o codigo.

    Tipo de inserção no banco de dados = Cadastro de usuários:

    Eu queria que esse tipo aqui seja igual ao Tipo de inserção no banco de dados = O Admin do site poderá botar novos usuários para fazer postagens(A primeira do começo.) só que eu quero que seja retirado desse form o campo site e o tipo do usuário e que insira os dados coletados pelo form na tabela no meu banco de dados chamada USUARIOS nos campos usuario, sexo, pixtar, sexo2, email e senha.

    E que você tirasse esse negocio de ir para outra pagina colocar o código.
    Não se preocupe com o negocio do INSERT INTO, pois se mostre onde eu colocarei ele.

    Por Favor faz isso por mim.

    Manda os arquivos para o meu E-mail.

    • Hi Vitor,
      It was really difficult to understand you, because I don’t know Portuguese. I had to use google translator to translate your comment.
      I think, that the best way to understand why it doesn’t work – to activate firebug, and try to validate this form. And, if you have any errors, firebug easily catch it and you will know where is a problem.

  6. In my index.html there is this:

    If I change your index.php to submit.php where does it go? On WAMPserver? I am new to this. Also how will the submit.php file get the info from the form? Can you please explain that?

    • Hello Ankur,
      If you work on localhost, you can work on your WAMP server. It doesn’t matter if your form is located exactly on the index.html file, actually, it can be placed everywhere you need. What about the index.php file, you can place this validation code whenever you want (for example: submit.php or validate.php), just don’t forget to update the value of ‘action’ attribute for the main form.

  7. How to insert data directly yo sql database without validation code.

    (need both js and php validation but not validation code

    • Hi Arun,
      Pay attention, that this function is defined in the ‘js/script.js’ file (which is attached in the page)

  8. hi , i am new to php and javascript, i want to know how to display error messages to users before they can press submit button , it is done by javascript , can u teach me plz

    • Hi iAisha,
      In our example we used double validation: JS + PHP. Please read our tutorial (or – at least check the demo) to understand how it works.

  9. hi Andrey, i want to build a website, can you suggest me how to build it. i know html,php,css, well, i don’t want to use CMS tool like (wordpress, Drupal etc..). many people are using photoshop to built attractive website… i Think even you have developed this website using wordpress right????..

    • Hi venkatesh,
      Yes, this website is WP-based website, it is easy to understand. I personally have nothing against creating websites from scratch, I welcome it.

  10. Hello Andrew and thanks for providing this script. I just noticed that in your index.php file you are using ereg, which is depricated. You might want to change your script to use preg_match() instead. I’ve provided an example for you.

    if(!preg_match(‘/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/’, $email))

    Thanks again!
    Phillip

  11. fantastic script, awesome. Thank you very much.

    I have styled it heavily, and all works fine, so far. The only thing I am missing now is… how does the data get submitted to the database, and, how do I get a mail, for example, of a new person registered?

    Sorry for my ignorance, PHP is not my bright side ;-)

    Thank you so much.

  12. i have 2 questions :
    1st , what is the purpose of step2.htm page ?
    and 2nd,from where u change the background color to pink and green for wrong or right background respectively…
    in given form i add aditional input fields like :

    Address

    Mobile Number

    City *

    Select City
    Rawalpindi
    Islamabad
    Lahore

    how can i change tha background color after right and wrong entry
    plzzzzzz reply me..

    • The second step page is for second form (of the registration). The green background color is in main.css (line 68) – default field styles, plus styles for input.correct. Incorrect styles – input.wrong

Leave a Reply to phil Cancel reply