sequence of text box validation


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: sequence of text box validation

  1. #1
    Liglin Guest

    sequence of text box validation


    Hi,

    The following code forces the user to first fill in the given name
    text box and then the
    family name text box. It does not and should not depend on any submit event.
    It will not
    let the user do anything else unless those two fields are completed. The
    combination of
    the necessary onBlur() with the focus() event makes it complicated, but it
    works with
    the help of var GivenNameComplete.

    With the onLoad="TheForm.GivenName.focus()" event still in place would anybody
    know
    how to modify this code so the user can choose what field to begin with?



    <html>

    <head>
    <title>Didactics Questions For Trainers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">
    <!--
    var GivenNameComplete=false;

    function ValiGivenName(){
    if (TheForm.GivenName.value=='') {
    alert('Please fill in your given name.');
    TheForm.GivenName.focus();
    }
    else{
    GivenNameComplete=true
    TheForm.FamilyName.focus();
    }
    }

    function ValiFamilyName(){
    if (TheForm.FamilyName.value=='' && GivenNameComplete) {
    alert('Please fill in your family name.');
    TheForm.FamilyName.focus();
    }
    }
    //-->
    </script>
    </head>

    <body bgcolor="E4E4E4" onLoad="TheForm.GivenName.focus()">

    <form name="TheForm" method="post" action="Validation.html">
    <p>Given name: <input type="text" name="GivenName" onBlur="ValiGivenName()">
    Family name: <input
    type="text" name="FamilyName" onBlur="ValiFamilyName()"> </p>
    </form>
    </body>
    </html>


  2. #2
    Michael Guest

    Re: sequence of text box validation


    Liglin,
    You can change the logic as mentioned but the approach I usually take is
    much simpler and guarantees good validation. I usually add a checkbox they
    have to click to acknowledge completion. This checkbox calls the validation
    script that validates the form. Returns an alert if incomplete and unchecks
    the checkbox, if not then enables the submit button for use. Also, if they
    go back to a field to make a correction it resets the validation process.

    Code below for script and form.
    Good luck and let me know if you have questions,
    Michael
    Runtime Web Development

    <!--
    function validator(gName, fName)
    {
    if (gName.length < 2 || fName.length < 2)
    {
    alert("You must enter both names before submitting!");
    TheForm.validate.checked = false;
    }
    else
    {
    TheForm.submitBtn.disabled = false;
    }
    }

    function resetValidate()
    {
    TheForm.validate.checked = false;
    TheForm.submitBtn.disabled = true;
    }
    //-->
    <!--
    <form name="TheForm" method="post" action="Validation.html">
    <p>
    Given name: <input type="text" name="GivenName" onfocus="resetValidate();">
    Family name: <input type="text" name="FamilyName" onfocus="resetValidate();">
    <br>
    Both names Correct? <input type="Checkbox" name="validate" onclick="validator(TheForm.GivenName.value,
    TheForm.FamilyName.value);">
    </p>
    <input disabled type="Submit" name="submitBtn" value="Submit Names">
    </form>
    -->

    "Liglin" <liglinlillibli@hotmail.com> wrote:
    >
    >Hi,
    >
    > The following code forces the user to first fill in the given name
    >text box and then the
    >family name text box. It does not and should not depend on any submit event.
    >It will not
    >let the user do anything else unless those two fields are completed. The
    >combination of
    >the necessary onBlur() with the focus() event makes it complicated, but

    it
    >works with
    >the help of var GivenNameComplete.
    >
    >With the onLoad="TheForm.GivenName.focus()" event still in place would anybody
    >know
    >how to modify this code so the user can choose what field to begin with?
    >
    >
    >
    ><html>
    >
    ><head>
    ><title>Didactics Questions For Trainers</title>
    ><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    ><script language="JavaScript">
    ><!--
    >var GivenNameComplete=false;
    >
    >function ValiGivenName(){
    >if (TheForm.GivenName.value=='') {
    > alert('Please fill in your given name.');
    > TheForm.GivenName.focus();
    >}
    >else{
    > GivenNameComplete=true
    > TheForm.FamilyName.focus();
    > }
    >}
    >
    >function ValiFamilyName(){
    >if (TheForm.FamilyName.value=='' && GivenNameComplete) {
    > alert('Please fill in your family name.');
    > TheForm.FamilyName.focus();
    > }
    >}
    >//-->
    ></script>
    ></head>
    >
    ><body bgcolor="E4E4E4" onLoad="TheForm.GivenName.focus()">
    >
    ><form name="TheForm" method="post" action="Validation.html">
    > <p>Given name: <input type="text" name="GivenName" onBlur="ValiGivenName()">
    >Family name: <input
    > type="text" name="FamilyName" onBlur="ValiFamilyName()"> </p>
    ></form>
    ></body>
    ></html>
    >



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center