JavaScript Focus()

#1
Guest_GerarD_91_*

Posted 27 March 2011 - 05:27 AM

Guests

Hi there ppl. I'm working on a simple verification script. It should check the value of an html input. If it's empty, show a msg on a div, and focus on the textbox. Here is my Code:

Form:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Nuevo Usuario Laboral</title>

        <script src="js/reg_validar.js" type="text/javascript"></script>

    </head>

<body>


    <h1>Información general</h1>

    <p> </p>


    <form action="#" name="registro">

    <table width="600" border="0">

        <tr>

            <td width="150">Nombre:</td>

            <td width="300">

                <input name="nombre" type="text" value="" size="40"

                       onBlur="validate_form1(this.value,'nombre')"/>

            </td>

            <td width="150"><div id="eNombre" ></div> </td> <!--Msg-->

        </tr>

        <tr>

            <td>Apellido:</td>

            <td>

              <input type="text" name="apellido" id="apellido" size="40"

                     onBlur="validate_form1(this.value)"/>

            </td>

        </tr>

        <tr>

            <td>Cedula:</td>

            <td>

                <input type="text" name="cedula" id="cedula"

                       onBlur="validate_form1(this.value)"/>

            </td>

        </tr>

    </table>

    </form>


</body>

</html>

JS:


function validate_form1(Valor, Campo){

    

    if (Valor==""){

        document.getElementById('eNombre').innerHTML = "Requerido";

        registro.nombre.focus();

    }

}

As u can see, it should work just fine. It works indeed, the problem is that i need to show several msg, but i don't want to make a code for each input. So the question is: How do i write "registro.(Campo).focus()" ?. The var "Campo" will be the name of the input, "registro" is the name of the form. I've try to do it, but it just doesn't work.

#2
wim DC

Posted 27 March 2011 - 09:16 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

HTML onblur:


onBlur="validate(this)"


function validate(inputField){      

    if (inputField.value==""){ 

        document.getElementById(inputField.name + '_message').innerHTML = "required"; 

        inputField.focus(); 

    } else {

		document.getElementById(inputField.name + '_message').innerHTML = ""; 

	}

}

I gave the divs with the message an id equal to the inputField's name + '_message'
like:


<input name="name" type="text" value="" size="40" onBlur="validate(this)"/> 

<div id="name_message" ></div>

In IE :glare: you go in an infinite loop tho, If you give focus to textbox1, leave it empty, then click textbox2.
Clicking in textbox2 FIRST gives it focus, then the onblur kicks in of textbox1, Javascript notices the value is empty, so it gives textbox1 focus, this causes textbox2 to loose focus,
javascript notices textbox2 is empty, so it gives textbox2 focus. And so on and on... I will edit this post if I found something for this.

#3
Guest_GerarD_91_*

Posted 27 March 2011 - 09:55 AM

Guests

Thanks @win DC, that's some nice code :c-^_^:...i'll use it and see how to fix that loop on IE...
Thanks again for that quick reply :).

#4
wim DC

Posted 27 March 2011 - 10:07 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

IE Fix:


[B]var focus;

var focusObject;


function setFocus(object){

	if(object == focusObject){

		focus = true;

	}

}[/B]


function validate(inputField){   

	[B]if(focus){[/B]

		if (inputField.value==""){ 

			document.getElementById(inputField.name + '_message').innerHTML = "required"; 

			[B]focusObject = inputField;

			focus = false;[/B]

			inputField.focus(); 			

		} else {

			document.getElementById(inputField.name + '_message').innerHTML = ""; 

		}

	[B]}[/B]

}

input elements look like:


<input name="name" type="text" value="" size="40" onBlur="validate(this)" onfocus="setFocus(this)"/> 

<div id="name_message" ></div>

#5
Guest_GerarD_91_*

Posted 27 March 2011 - 10:31 AM

Guests

Thanks again @wim DC... But i'm using your first code and works o IE.! :)... No need for Fix... Now i'll just add more validation functions... ^^

#1 Guest_GerarD_91_* Posted 27 March 2011 - 05:27 AM

#2 wim DC Posted 27 March 2011 - 09:16 AM

#3 Guest_GerarD_91_* Posted 27 March 2011 - 09:55 AM

#4 wim DC Posted 27 March 2011 - 10:07 AM

#5 Guest_GerarD_91_* Posted 27 March 2011 - 10:31 AM

1 user(s) are reading this topic

Sign In

#1
Guest_GerarD_91_*

Posted 27 March 2011 - 05:27 AM

#2
wim DC

Posted 27 March 2011 - 09:16 AM

#3
Guest_GerarD_91_*

Posted 27 March 2011 - 09:55 AM

#4
wim DC

Posted 27 March 2011 - 10:07 AM

#5
Guest_GerarD_91_*

Posted 27 March 2011 - 10:31 AM