0

HTML Code:

<html>

<head>
    <title>Registration</title>
        <meta charset="utf-8">
        <link href="home.css" rel="stylesheet" type="text/css"/>
        <link href="booking.css" rel="stylesheet" type="text/css"/>
        <script src="val_registration.js" type="text/javascript"></script>
        <link rel="stylesheet" href="jquery.css">
        <script src="jquery01.js" type="text/javascript"></script>
        <script src="jquery02.js" type="text/javascript"></script>
    <script>
    $(function() {
    $( "#datepicker" ).datepicker();
    });
    </script>

    <script language="JavaScript1.2">
    var howOften = 5; //number often in seconds to rotate
    var current = 0; //start the counter at 0
    var ns6 = document.getElementById&&!document.all; //detect netscape 6

    // place your images, text, etc in the array elements here
    var items = new Array();
    items[0]="<a href='link.htm'><img alt='photo01' src='photo01.jpg' height='237' width='750' border-style='inset' border-weight:'10px' /></a>"; //a linked image
    items[1]="<a href='link.htm'><img alt='photo02' src='photo02.jpg' height='237' width='750' border-style='inset'  border-weight:'10px'/></a>"; //a linked image
    items[2]="<a href='link.htm'><img alt='photo03' src='photo03.jpg' height='237' width='750' border-style='inset'  border-weight:'10px'/></a>"; //a linked image
    items[3]="<a href='link.htm'><img alt='photo04' src='photo04.jpg' height='237' width='750' border-style='inset'  border-weight:'10px'/></a>"; //a linked image
    items[4]="<a href='link.htm'><img alt='photo05' src='photo05.jpg' height='237' width='750' border-style='inset'  border-weight:'10px'/></a>"; //a linked image

    function rotater() {
        document.getElementById("placeholder").innerHTML = items[current];
        current = (current==items.length-1) ? 0 : current + 1;
        setTimeout("rotater()",howOften*1000);
    }

    function rotater() {
        if(document.layers) {
            document.placeholderlayer.document.write(items[current]);
            document.placeholderlayer.document.close();
        }
        if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current]
            if(document.all)
                placeholderdiv.innerHTML=items[current];
                current = (current==items.length-1) ? 0 : current + 1; //increment or reset
                setTimeout("rotater()",howOften*1000);
    }
    window.onload=rotater;
    </script>
</head>

<body>
    <div id="login" name="login">
        &nbsp <a href="login.htm" target="_self"> Login</a>&nbsp&nbsp<b><b>|</b></b>
        &nbsp<a href="signup.htm" target="_self">New user?</a>&nbsp&nbsp
    </div>

    <img src="logo.jpg" alt="logo" id="logo" width="500" height="100" usemap="#logomap"/></br>
    <map id="logomap" name="logomap">
        <area shape="rect" coords="0,0,743,146" href="home.htm" alt="home"/>
        <area shape="default" coords"0,0,743,146" href="home.htm" alt="home"/>
    </map></br>

    <div id="placeholderdiv"></div><br/>

    <div id="mlink" >
        <a href="home.htm" target="_self" id="home"> Home </a>
        <a href="aboutus.htm" target="_self" id="aboutus"> About Us </a>
        <a href="promotion.htm" target="_self" id="promotion"> Promotion </a>
        <a href="contactus.htm" target="_self" id="contactus"> Contact Us </a>
        <a href="faqs.htm" target="_self" id="faqs"> FAQs </a>  
    </div><br/>

    <div id="opac">
        <h1> Registration </h1>
    <hr/>
        <form action="success(registration_page).html" method="post" id="myform" onsubmit="return val_registration ()"> 
        <table rules="none" cellpadding="10px" cellspacing="10px">
        <tr>
            <td><label for="Username">Username(No case sensitive):<span id="imp">*</span></label></td><td><input type="text" id="Username" tabindex="1"/>
            <br/><span class="eg">&nbsp;eg:ZerOGravitY</span></td>
        </tr>

        <tr>
            <td><label for="Password">Password(Must more than<br/> 8 characters):<span id="imp">*</span></label></td><td><input type="text" id="Password" tabindex="2"/>
            <br/><span class="eg">&nbsp;eg:567834gravity</span></td></td>
        </tr>

        <tr>
            <td><label for="Retype_password">Retype password:<span id="imp">*</span></label></td><td><input type="text" id="Retype_password" tabindex="3"/>
            <br/><span class="eg">&nbsp;eg:567834gravity</span></td></td>
        </tr>

        <tr>
            <td><label for="First_name">First name:<span id="imp">*</span></label></td><td><input type="text" id="First_name" tabindex="4"/>
            <br/><span class="eg">&nbsp;eg:Loh</span></td></td>
        </tr>

        <tr>
            <td><label for="Last_name">Last name:<span id="imp">*</span></label></td><td><input type="text" id="Last_name" tabindex="5"/>
            <br/><span class="eg">&nbsp;eg:Le You</span></td></td>
        </tr>

        <tr>
            <td><label for="ID_number">ID number (Please omit '-') :<span id="imp">*</span></label></td><td><input type="text" id="ID_number" maxlength="12" tabindex="6"/>
            <br/><span class="eg">&nbsp;eg:940731140991</span></td></td>
        </tr>

        <tr>
            <td><label for="datepicker">DOB:<span id="imp">*</span></label></td>
            <td><input type="text" id="datepicker" tabindex="7"/></td>
        </tr>

        <tr>
            <td>Mobile number:<span id="imp">*</span></td>
            <td colspan="3">
                <select tabindex="8">
                    <optgroup label="Prefix">
                    <option value="010">010</option>
                    <option value="012">012</option>
                    <option value="013">013</option>
                    <option value="016">016</option>
                    <option value="017">017</option>
                    <option value="018">018</option>
                    <option value="019">019</option>
                    </optgroup>
                </select>
                <input type="text" id="Mobile_number" tabindex="9"/>
                <input type="text" class="err" id="err_Mobile_number" readonly="readonly"/>
                <br/><span class="eg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eg:2345678 or 23456789</span>
            </td>
        </tr>

        <tr>
            <td><label for="E_mail">E-mail:<span id="imp">*</span></label></td>
            <td><input type="text" id="E_mail" tabindex="10"/>
            <br/><span class="eg">&nbsp;eg:[email protected]</span></td></td>
        </tr>

        <tr>
            <td colspan="4"><input type="submit" value="Confirm" id="confirm2" tabindex="11" />
            <input type="reset" value="Cancel" id="cancel2" tabindex="12"/></td>
        </tr>

        <tr>
            <td>Notes: <span id="imp">*</span> indicates the column that must be filled</td>
        </tr>
    </table>
    </form>
    </div>

    <hr/>
    <b><i id="copyright">Copyrighted : &#169;  2014  I &hearts; Travels agency. </i></b>
    <b><address id="address"> Address : I love agency, Taman Setapak,  Jalan Genting Klang, 53300 Kuala Lumpur </address></b>
</body>

</html>

This is my JavaScript code (for form validation):

function val_registration ()

{
    var val_Username = document.getElementById("Username").value;
    var string_Username = /^[a-zA-Z0-9]{1,}$/;

    var err = "";

    if (val_Username == null || val_Username == "" || !string_Username.test(val_Username))

    {
        err += "\u2022Username cannot be blank/Username can contain\n alphabets or numbers only.\n";    

        document.getElementById("Username").focus();
    }

    var val_Password = document.getElementById("Password").value;
    var string_Password = /^[a-zA-Z0-9]{9,}$/;

    if (val_Password == null || val_Password == "" || !string_Password.test(val_Password))

    {
        err += "\u2022Password cannot be blank/Password can contain\n alphabets or numbers only and it must contain at \n least 9 characters.\n";

        document.getElementById("Password").focus();
    }

    var val_Retype_password = document.getElementById("Retype_password").value;

    if (val_Retype_password == null || val_Retype_password == "" || val_Retype_password != val_Password)

    {
        err += "\u2022Retype password cannot be blank/Retype password\n must same with password typed.\n";

        document.getElementById("Retype_password").focus();
    }

    var val_First_name = document.getElementById("First_name").value;
    var string_First_name = /^[a-zA-Z]{1,}$/;

    if (val_First_name == null || val_First_name == "" || !string_First_name.test(val_First_name))

    {
        err += "\u2022Firstname cannot be blank/Firstname can contain \u00A0alphabets only.\n";

        document.getElementById("First_name").focus();
    }

    var val_Last_name = document.getElementById("Last_name").value;
    var string_Last_name = /^[ a-zA-Z@'\-_()\.,]{1,}$/;

    if (val_Last_name == null || val_Last_name == "" || !string_Last_name.test(val_Last_name))

    {
        err += "\u2022Lastname cannot be blank/Lastname can contain\n alphabets or special symbols(@ ' - _ ( ).,) only.\n";

        document.getElementById("Last_name").focus();
    }   

    var val_ID_number = document.getElementById("ID_number").value;
    var string_ID_number = /^[0-9]{12}$/;

    if (val_ID_number == null || val_ID_number == "" || !string_ID_number.test(val_ID_number))

    {
        err += "\u2022Id number cannot be blank/Id number can contain\n excatly 12 numbers only.\n";

        document.getElementById("ID_number").focus();
    }   

    var val_datepicker = document.getElementById("datepicker").value;

    if (val_datepicker == null || val_datepicker == "")

    {
        err += "\u2022DOB cannot be blank.\n";

        document.getElementById("datepicker").focus();
    }   

    var val_Mobile_number = document.getElementById("Mobile_number").value;
    var string_Mobile_number = /^[0-9]{7,8}$/;

    if (val_Mobile_number == null || val_Mobile_number == "" || !string_Mobile_number.test(val_Mobile_number))

    {
        err += "\u2022Mobile number cannot be blank/Mobile number can\n \u00A0contain 7 or 8 numbers only.\n";

        document.getElementById("Mobile_number").focus();
    }   

    var val_E_mail = document.getElementById("E_mail").value;
    var atpos = val_E_mail.indexOf("@");
    var dotpos = val_E_mail.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2 >= val_E_mail.length)

    {
        err += "\u2022E-mail cannot be blank/E-mail format must follow\n \u00A0the example provided.\n";

        document.getElementById("E_mail").focus();
    }

    if (err != null || err != "")

    {
        alert(err);

        return false;
    }
}

This works fine except for one thing:

When all fields are empty, an alert box pops up to indicate the error. However, after I click 'OK', it directly moves to the DOB field instead of the username field.

When I click OK, I want it to validate and focus on the first element in the sequence which is not filled or is invalid.

For example: If both the username and password fields are empty and I click OK, the focus should go to the username field first.

Improve this question
4
  • 1
    Add HTML,JAVASCRIPT code to jsfiddle.net and share link Commented Mar 28, 2014 at 11:58
  • 1
    try to use return false; after your .focus(); function. Commented Mar 28, 2014 at 11:58
  • have edited your question's description, PS. Commented Mar 28, 2014 at 12:13
  • After adding return false for every .focus function,the alert box does not pop up. Commented Mar 28, 2014 at 12:15

2 Answers 2

Reset to default
1

you need to return false; after each validation check!

try this:

Edit1:

function val_registration()
{
    var $invalidInput;
    var val_Username = document.getElementById("Username").value;
    var string_Username = /^[a-zA-Z0-9]{1,}$/;

    var err = "";

    if (val_Username == null || val_Username == "" || !string_Username.test(val_Username))
    {
        err += "\u2022Username cannot be blank/Username can contain\n alphabets or numbers only.\n";
        var $input = document.getElementById("Username");
        $invalidInput=$input;
    }

    var val_Password = document.getElementById("Password").value;
    var string_Password = /^[a-zA-Z0-9]{9,}$/;

    if (val_Password == null || val_Password == "" || !string_Password.test(val_Password))
    {
        err += "\u2022Password cannot be blank/Password can contain\n alphabets or numbers only and it must contain at \n least 9 characters.\n";
        if($invalidInput==undefined){
          var $input = document.getElementById("Password");        
          $invalidInput=$input;
        }
    }

    var val_Retype_password = document.getElementById("Retype_password").value;

    if (val_Retype_password == null || val_Retype_password == "" || val_Retype_password != val_Password)

    {
        err += "\u2022Retype password cannot be blank/Retype password\n must same with password typed.\n";
         if($invalidInput==undefined){
          var $input = document.getElementById("Retype_password");        
          $invalidInput=$input;
        }        
    }

    var val_First_name = document.getElementById("First_name").value;
    var string_First_name = /^[a-zA-Z]{1,}$/;

    if (val_First_name == null || val_First_name == "" || !string_First_name.test(val_First_name))

    {
        err += "\u2022Firstname cannot be blank/Firstname can contain \u00A0alphabets only.\n";

        if($invalidInput==undefined){
          var $input = document.getElementById("First_name");        
          $invalidInput=$input;
        }  
    }

    var val_Last_name = document.getElementById("Last_name").value;
    var string_Last_name = /^[ a-zA-Z@'\-_()\.,]{1,}$/;

    if (val_Last_name == null || val_Last_name == "" || !string_Last_name.test(val_Last_name))

    {
        err += "\u2022Lastname cannot be blank/Lastname can contain\n alphabets or special symbols(@ ' - _ ( ).,) only.\n";

        if($invalidInput==undefined){
          var $input = document.getElementById("Last_name");        
          $invalidInput=$input;
        }
    }

    var val_ID_number = document.getElementById("ID_number").value;
    var string_ID_number = /^[0-9]{12}$/;

    if (val_ID_number == null || val_ID_number == "" || !string_ID_number.test(val_ID_number))

    {
        err += "\u2022Id number cannot be blank/Id number can contain\n excatly 12 numbers only.\n";
         if($invalidInput==undefined){
          var $input = document.getElementById("ID_number");        
          $invalidInput=$input;
        }
    }

    var val_datepicker = document.getElementById("datepicker").value;

    if (val_datepicker == null || val_datepicker == "")

    {
        err += "\u2022DOB cannot be blank.\n";

        if($invalidInput==undefined){
          var $input = document.getElementById("datepicker");        
          $invalidInput=$input;
        }
    }

    var val_Mobile_number = document.getElementById("Mobile_number").value;
    var string_Mobile_number = /^[0-9]{7,8}$/;

    if (val_Mobile_number == null || val_Mobile_number == "" || !string_Mobile_number.test(val_Mobile_number))

    {
        err += "\u2022Mobile number cannot be blank/Mobile number can\n \u00A0contain 7 or 8 numbers only.\n";

        if($invalidInput==undefined){
          var $input = document.getElementById("Mobile_number");        
          $invalidInput=$input;
        }
    }

    var val_E_mail = document.getElementById("E_mail").value;
    var atpos = val_E_mail.indexOf("@");
    var dotpos = val_E_mail.lastIndexOf(".");

    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= val_E_mail.length)

    {
        err += "\u2022E-mail cannot be blank/E-mail format must follow\n \u00A0the example provided.\n";
          if($invalidInput==undefined){
          var $input = document.getElementById("E_mail");        
          $invalidInput=$input;
        }
    }

    if (err != null || err != "")
    {
        $invalidInput.focus();
        alert(err);
        return false;
    }
}

Why it was not working before:

your script was checking each element setting focus and adding error message as required for each element till the last element in the list. Focus state can only be active for a single element on the page at a time. Since the last erroneous element was receiving the focus every time for all the elements, it never stopped at first element.

What I did:

In updated script: I took a variable to store invalid element's reference. As soon the code finds an invalid element- it assigns it to variable $invalidElement. It does the same for every element. So this way $invalidElement always refere to first erroneous element at a time whereas errors get added to the error list every time.
In the end it checks if error is not null. It it is, focus to the first erroneous element and show the error message.

Simple as that!

Hope it helps!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I tried just now.Although it works, but the alert box does not pop up.
Thanks for your answer and it works very well.But can you please explain the code that you added just now?Because I haven't learnt this yet and I would like to know more:)
okay, check the edit in my answer. and don't forget to mark it as answer if it helped! Cheers!!
This really makes me understand better.Don't worry,I will mark it as answer as it is very helpful and useful:)
0

Usually on HTML, the focus order of elements depends on tabindex attribute.

However, if you want to avoid the "natural" or the defined by tabindex order of your focusing, you can always use 

yourObject.focus();

Just define the situation you want to control and the behaviour you need to apply when it happens.

Improve this answer

3 Comments

I have used tabindex.However,the same thing still happen.
If I've understood you, what you want is to alter the focusing flow under determinated circumstances. Just define that situations on your javascript, and when they come use focus() method to send the focus to the element you need.
You can see from my codes that I am using yourObject.focus();, but it cannot work.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.