Use javascript validation like validation summury

Use JavaScript validation like validation summary 

Step 1. Create a form as below..

<html>
<head>
    <title></title>
    <link href="/css/hcs/site.css" temp_href="/css/hcs/site.css" rel="stylesheet" type="text/css" />
</head>
<div class="request_form">
    <form action="http://abc.com/get.html" class="request_form" enctype="application/x-www-form-urlencoded"
    id="Form" method="post" name="Form">
    <table>
        <tr>
            <th>
                <label>
                    * First Name:</label>
            </th>
            <th>
                <label>
                    * Last Name:</label>
            </th>
        </tr>
        <tr>
            <td>
                <input class='input_txt1' id="FirstName" maxlength='255' name="FirstName" tabindex='1' type='text' value="" />
                <br>
            </td>
            <td>
                <input class='input_txt1' id="LastName" maxlength='255' name="LastName" tabindex='2' type='text' value="" />
                <br>
            </td>
        </tr>
        <tr>
            <th>
                <label>
                    * Company Name:</label>
            </th>
            <th>
                <label>
                    * Email Address:</label>
            </th>
        </tr>
        <tr>
            <td>
                <input class='input_txt1' id="Company" maxlength='255' name="Company" tabindex='3' type='text' value="" />
                <br>
            </td>
            <td>
                <input class='input_txt1' id="Email" maxlength='255' name="Email" tabindex='4' type='text' value="" />
                <br>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <input id='FrmSubmit' name='submitButton' class="input_submit" type='submit' value='Submit' onclick='return validate();'>
            </td>
        </tr>
    </table>
    </form>
</div>
</html>

Step 2. Add given script and call this on button onclick event by  onclick='return validate();'.

<script type="text/javascript">
    function validate() {
        var FirstName = document.getElementById('FirstName').value;
        var LastName = document.getElementById('LastName').value;
        var Company = document.getElementById('Company').value;
        var Email = document.getElementById('Email').value;
        var errors = "";
        if (FirstName == "") {
            errors += "Please enter your First name.\n";
        }
        if (LastName == "") {
            errors += "* Please enter your last name.\n";
        }
        if (Company == "") {
            errors += "* Please enter your company name.\n";
        }
        if (Email == "") {
            errors += "* Please enter your email address.\n";
        }
        if (errors.length) {
            alert('One or more errors occurred:\n\n' + errors);
            return false;
        }
    }
</script>

Step 3. Run the page and check it, the validations will show like a validation summary of asp.net control.

Ebook Download
View all
Learn
View all