Monday, August 27, 2012

Javascript Form Validation

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type='text/javascript'>
        function formValidator() {
            // Make quick references to our fields
            var firstname = document.getElementById('firstname');
            var addr = document.getElementById('addr');
            var zip = document.getElementById('zip');
            var state = document.getElementById('state');
            var username = document.getElementById('username');
            var email = document.getElementById('email');
            // Check each input in the order that it appears in the form!
            if (isAlphabet(firstname, "Please enter only letters for your name")) {
                if (isAlphanumeric(addr, "Numbers and Letters Only for Address")) {
                    if (isNumeric(zip, "Please enter a valid zip code")) {
                        if (madeSelection(state, "Please Choose a State")) {
                            if (lengthRestriction(username, 6, 8)) {
                                if (emailValidator(email, "Please enter a valid email address")) {
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
            return false;
        }
        function notEmpty(elem, helperMsg) {
            if (elem.value.length == 0) {
                alert(helperMsg);
                elem.focus(); // set the focus to this input
                return false;
            }
            return true;
        }
        function isNumeric(elem, helperMsg) {
            var numericExpression = /^[0-9]+$/;
            if (elem.value.match(numericExpression)) {
                return true;
            } else {
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
        function isAlphabet(elem, helperMsg) {
            var alphaExp = /^[a-zA-Z]+$/;
            if (elem.value.match(alphaExp)) {
                return true;
            } else {
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
        function isAlphanumeric(elem, helperMsg) {
            var alphaExp = /^[0-9a-zA-Z]+$/;
            if (elem.value.match(alphaExp)) {
                return true;
            } else {
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
        function lengthRestriction(elem, min, max) {
            var uInput = elem.value;
            if (uInput.length >= min && uInput.length <= max) {
                return true;
            } else {
                alert("Please enter between " + min + " and " + max + " characters");
                elem.focus();
                return false;
            }
        }
        function madeSelection(elem, helperMsg) {
            if (elem.value == "Please Choose") {
                alert(helperMsg);
                elem.focus();
                return false;
            } else {
                return true;
            }
        }
        function emailValidator(elem, helperMsg) {
            var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
            if (elem.value.match(emailExp)) {
                return true;
            } else {
                alert(helperMsg);
                elem.focus();
                return false;
            }
        }
    </script>
</head>
<body onsubmit='return formValidator()'>
    <form id="form1" runat="server">
    <table border="0">
        <tr>
            <td>
                First Name:
            </td>
            <td>
                <input type='text' id='firstname' />
            </td>
        </tr>
        <tr>
            <td>
                Address:
            </td>
            <td>
                <input type='text' id='addr' />
            </td>
        </tr>
        <tr>
            <td>
                Zip Code:
            </td>
            <td>
                
                <input type='text' id='zip' />
            </td>
        </tr>
        <tr>
            <td>
                State:
            </td>
            <td>
                <select id='state'>
                    <option>Please Choose</option>
                    <option>AL</option>
                    <option>CA</option>
                    <option>TX</option>
                    <option>WI</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Username(6-8 characters):
            </td>
            <td>
                <input type='text' id='username' />
            </td>
        </tr>
        <tr>
            <td>
                Email:
            </td>
            <td>
                <input type='text' id='email' />
            </td>
        </tr>
        <tr>
            <td>
                <input type='submit' value='Check Form' />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>



Output:

Screenshot_1

0 comments:

Post a Comment