Scribd Logo
Upload

Welcome to Scribd!

  • Process To Validate HTML Form With Javascript

    Uploaded by

    Durgesh parlewar
    16 views5 pages
    This document discusses validating HTML forms with JavaScript. It provides an example of validating a single form field for required text on blur and keyup events. It also outlines steps to validate an entire form: 1) Include the JavaScript validation file and 2) Call the validation functions in each form field. An example HTML form with multiple fields is given, calling validation functions on appropriate events to validate the entire fund transfer form.

    Original Description:

    Original Title

    ProcessToValidateHTMLFormWithJS.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses validating HTML forms with JavaScript. It provides an example of validating a single form field for required text on blur and keyup events. It also outlines steps to validate an entire form: 1) Include the JavaScript validation file and 2) Call the validation functions in each form field. An example HTML form with multiple fields is given, calling validation functions on appropriate events to validate the entire fund transfer form.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views5 pages

    Process To Validate HTML Form With Javascript

    Uploaded by

    Durgesh parlewar
    This document discusses validating HTML forms with JavaScript. It provides an example of validating a single form field for required text on blur and keyup events. It also outlines steps to validate an entire form: 1) Include the JavaScript validation file and 2) Call the validation functions in each form field. An example HTML form with multiple fields is given, calling validation functions on appropriate events to validate the entire fund transfer form.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    http://www.guru99.

    com/

    Process to Validate
    HTML Form with
    Javascript

    1
    http://www.guru99.com/

    Scenario

    As shown in screenshot, following validations are set on various fields in the Fund Trasnfer Module

    Lets consider a validation of a single field


    As per SRS Technical Requirement - T91
    DESCRIPTION CANNOT BE BLANK

    In HTML, we are calling the function validatedesc() onBlur


    <td>Description</span></td>

    <td><input type="text" name="desc" value="" onBlur="validatedesc()"


    onKeyUp="validatedesc()"/>

    <label id="message17"></label> </td>

    When the user finishes entering value in this field and moves to next field , onBlur event will be
    triggerred & Following function is called,

    function validatedesc()
    {
    var des = document.forms[0]["desc"].value; // get the value of filed

    2
    http://www.guru99.com/

    if (des == null || des == "") // check if value is null or blank


    { //if yes = show an error message
    document.getElementById('message17').style.visibility = "visible";
    document.getElementById('message17').innerHTML = "Description can not
    be blank";
    }
    else
    { //if no = do nothing
    document.getElementById('message17').style.visibility = "hidden";
    }
    }

    Steps to Validate Entire Form

    In order to validate the entire form you need to do 2 set of activities

    1) Include the test.js File


    2) Call the respective functions in the fields of the form

    Here is the complete form with Validations for FundTransfer


    Code

    <html>

    <!--comments: To transfer fund-->

    <head>

    <!--comments: To link to a common cascading style sheets-->


    <link rel="stylesheet" type="text/css" href="../css/style.css">

    <!--comments: To link to javascript files-->

    <script language="JavaScript" src="../JavaScript/test.js"></script>


    <div><h2 class="barone">Guru99 Bank</h2></div>
    <div><div><ul class="menusubnav">

    <li class="orange"><a href="Customerhomepage.php">Customer</a></li>

    <li><a href="BalEnqInput.php">Balance Enquiry</a></li>

    <li><a href="customerfundinput.php">Fund Transfer</a></li>

    <li><a href="PasswordInput.php">Changepassword</a></li>

    <li><a href="MiniStatementInput.php">Mini Statement</a></li>

    3
    http://www.guru99.com/

    <li><a href="Logout.php">Log out</a></li>


    </ul>

    </div>

    </div>
    <title>Fund Transfer Entry Page </title>

    </head>
    </head>

    <body>

    <br/><br/><br/><br/>

    <table class="layout1" border="0" align="center">

    <form name="addcust" method ="POST" action ="customerfund.php"


    onsubmit="return validateFundTransfer();">

    <tr>
    <td align="center" colspan="2"><p class="heading3">Fund
    Transfer</p></td>

    </tr>
    <tr>
    </tr>
    <tr>
    </tr>

    <tr>
    <td>Payers account no</td><td><input type="text"
    name="payersaccount" value="" onBlur="validatepayersaccountno()" onKeyUp
    ="validatepayersaccountno()"/> <label id="message10"></label>

    </tr>
    <tr>
    <td>Payees account no</td>
    <td>
    <input type="text" name="payeeaccount" value=""
    onBlur="validatepayeeaccountno()" onKeyUp="validatepayeeaccountno()" />
    <label id="message11"></label>
    </td>
    </tr>
    <tr>
    <td>Amount</td><td><input type="text" name="ammount"
    maxlength = "8" onBlur="validateammount()" onKeyUp="validateammount()"/>
    <label id="message1"></label></td>

    </tr>

    <tr>
    <td>Description</span></td><td><input type="text" name="desc"
    value="" onBlur="validatedesc()" onKeyUp="validatedesc()"/> <label
    id="message17"></label> </td>

    4
    http://www.guru99.com/

    </tr>
    <tr><input type="hidden" name="formid" value="”/>
    <td></td>
    <td><input type="submit" name="AccSubmit" value="Submit"
    onClick=" return validateone();">
    <input type="reset" name="res" value="Reset"></td>
    </tr>

    </form>

    </table>
    <p align="right"><a href="Customerhomepage.php">Home</a></p>

    </body>
    </html>

    Now , the validation functions are called on onclick(), onkeyup(), onblur(), onsubmit() events from
    the test.js file called in the HEAD section.

    You might also like