Validating User Input(including email validation) with JavaScript

Home arrow PHP Tutorials arrow PHP Tutorials arrow Validating User Input(including email validation) with JavaScript
Validating User Input(including email validation) with JavaScript Print E-mail
Contributed by Joe   
Wednesday, 21 June 2006
Abstract: Validating User Input with JavaScript

On the PHP client side, your best tool for validating data is JavaScript. JavaScript is different than PHP, because it's designed to execute in the user's browser instead of on the server. Because it executes in the client's computer, JavaScript is not allowed to access anything that could be a security risk, such as the local filesystem or network resources. JavaScript is primarily used in web pages. Although its name sounds like Java, it has no relationship to it.

 

Below is an example of Validating User Input with JavaScript

<SCRIPT LANGUAGE="JavaScript1.2" SRC="source.js">
</SCRIPT>

<HTML>
<HEAD>
    <TITLE>Sample Form</TITLE>
</HEAD>

<SCRIPT LANGUAGE="JavaScript1.2">
    function check_valid(form) {
    var error = "";
    error += verify_username(form.username.value);
    error += verify_password(form.password.value);
    error += verify_phone(form.phone.value);
    error += verify_email(form.email.value);
    if (error != "") {
       alert(error);
       return false;
    }
return true;
}
</SCRIPT>

<BODY BGCOLOR="#FFFFFF">
    <FORM action="process.php" METHOD="post"
onSubmit="return check_valid(this)" id="test1" name="test1">
    <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
        <TR>
            <TD WIDTH="30%" ALIGN="right">Username</TD>
            <TD WIDTH="70%">: <INPUT TYPE="text" NAME="username"></TD>
        </TR>
        <TR>
            <TD ALIGN="right">Password</TD>
            <TD>: <INPUT TYPE="password" NAME="password"></TD>
        </TR>
        <TR>
            <TD ALIGN="right">Phone</TD>
            <TD>: <INPUT TYPE="phone" NAME="phone"></TD>
        </TR>
        <TR>
            <TD ALIGN="right">Email</TD>
            <TD>: <INPUT TYPE="email" NAME="email"></TD>
        </TR>
        <TR>
            <TD>&nbsp;</TD>
            <TD><INPUT TYPE="SUBMIT" VALUE="Submit"></TD>
        </TR>
    </TABLE>
    </FORM>
</BODY>
</HTML>

 

 The file source.js contains functions to check the various fields
(Validating User Input with JavaScript)

// verify username - 610 chars, uc, lc, and underscore only.
function verify_username (strng) {
var error = "";
if (strng == "") {
   error = "You didn't enter a username.\n";
}
    var illegalChars = /\W/; // allow letters, numbers, and underscores
    if ((strng.length < 6) || (strng.length > 10)) {
       error = "The username is the wrong length. It must be 6-10 characters.\n";
    }
    else if (illegalChars.test(strng)) {
    error = "The username contains illegal characters.\n";
    }
return error;
}

// verify password - between 68 chars, uppercase, lowercase, and numeral
function verify_password (strng) {
var error = "";
if (strng == "") {
   error = "You didn't enter a password.\n";
}
    var illegalChars = /[\W_]/; // allow only letters and numbers
    if ((strng.length < 6) || (strng.length > 8)) {
       error = "The password is the wrong length. It must be 68 characters.\n";
    }
    else if (illegalChars.test(strng)) {
      error = "The password contains illegal characters.\n";
    }
    else if (!((strng.search(/(a-z)+/)) && (strng.search(/(A-Z)+/)) &&
(strng.search(/(0-9)+/)))) {
       error = "The password must contain at least one uppercase letter, one
lowercase letter, and one numeral.\n";
    }
return error;
}

// verify email
function verify_email (strng) {
var error="";
if (strng == "") {
   error = "You didn't enter an email address.\n";
}

    var emailFilter=/^.+@.+\..{2,3}$/;
    if (!(emailFilter.test(strng))) {
       error = "Please enter a valid email address.\n";
    }
    else {
//test email for illegal characters
       var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/
         if (strng.match(illegalChars)) {
          error = "The email address contains illegal characters.\n";
       }
    }
return error;
}

// verify phone number - strip out delimiters and verify for 10 digits
function verify_phone (strng) {
var error = "";
if (strng == "") {
   error =
"You didn't enter a phone number.\n";
}
//strip out acceptable non-numeric characters
var stripped = strng.replace(/[\(\)\.\-\ ]/g, '');
    if (isNaN(parseInt(stripped))) {
       error = "The phone number contains illegal characters.";

    }
    if (!(stripped.length == 10)) {
    error = "The phone number is the wrong length. Make sure you included an area
code.\n";
    }
return error;
}

 

Last Updated ( Wednesday, 21 June 2006 )

  home              contact us

 

©2006-2008 DeveloperZone.biz   All rights reserved     powered by Mambo Designed by Siteground