Forum Moderators: open

Message Too Old, No Replies

input validation for text box

         

swati

4:24 pm on Nov 23, 2004 (gmt 0)

10+ Year Member



hello,
I have a text box. If the user types anything apart from digits 0-9 then it should not get typed in the textbox(its name is 'usage') at all.

how do i do it?
( I tried calling a function like this:
onKeyPress="changeVal()" and in the function wrote

function changeVal(){
<?php if(is_numeric($_GET['usage'])){?>
myForm.myText.value = "" ;
<?php }?>
}

However its obviously wrong and says "error on page" in the bottom of the page...

I understand that php is server side and javascript is client side but i m so confused ..
please help!
Thanks

adni18

2:08 am on Nov 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<input type="text" onKeyDown="var lilKey=event.keyCode;if(lilKey==48){return true}else if(lilKey>=49&&lilKey<=57){return true}else{alert('Numbers only!');return false;}">

swati

8:24 am on Nov 24, 2004 (gmt 0)

10+ Year Member



I get the following error when i pasted the code u gave into my file ...

Parse error: parse error, unexpected '<' in c:\program files\easyphp1-7\www\mysite\css_test\try.php on line 8

The line 8 is:
<input type="text" onKeyDown="var lilKey=event.keyCode; if(lilKey==48){return true} else if(lilKey >=49&&lilKey<=57){return true}else{alert('Numbers only!');return false;}">

adni18

12:43 pm on Nov 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Remember, this isn't PHP. It is javascript. You don't have to declare anything as a PHP script.

swati

12:46 pm on Nov 24, 2004 (gmt 0)

10+ Year Member



yes but i want to use this stuff inside a php file

swati

12:53 pm on Nov 24, 2004 (gmt 0)

10+ Year Member



i mean i ve tried but cant come up with the solution...i want to do this validation inside a php file. Would your code not work if i put it in a php file?
Please help!

adni18

8:40 pm on Nov 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm not great with PHP. I wouldn't know.

rkolsky

10:53 pm on Nov 24, 2004 (gmt 0)

10+ Year Member



To do what you are asking you have to use javascript. PHP is a server side technology. You can use it to validate the input after the user submits the form but while the form is loaded you have to rely on the browser to do any validation based on object events. What you need to do is have the PHP output the necessary Javascript. You could try something like this. Note: I am using a regular expression to check the value but you don't have to. I just find it the easiest way to validate input strings. You can find information on regular expressions by doing a google search for regular expressions if you want to understand how they work(You may already know)

<html>
<body>
<input type="text" id="usage" onkeyup="checkField(this);">
</body>
<script language="javascript">
function checkField(object) {
var regex = /^\d$/;
if (!regex.test(object.value)) {
object.value = "";
} // end if
} // end function
</script>
</html>

swati

10:46 am on Nov 25, 2004 (gmt 0)

10+ Year Member



hey this works to a large extent but does allow the other alphabets to get printed atleast once........
and does not allow me to type more than 2 digits ...i want to keep a max limit of 3 digits
i tried
/(\d){1,3}/
but that doesnt work nor does

/(^\d$){1,3}/

swati

1:46 pm on Nov 25, 2004 (gmt 0)

10+ Year Member



Hello,
Could you also tell me how i could pop up an alert window to ensure that the user selects a value in a drop down menu.
I have 2 menus 'Project' and 'Usage'.
Project : drop-down
Usage : drop-down

The moment the user selects usage without first selecting a project he should be reminded to select project first ....how do i do that?

rkolsky

4:56 pm on Nov 25, 2004 (gmt 0)

10+ Year Member



Try this. This is essentially the same code as posted before in a slightly different format. Just have your PHP output this script and call this function in the same manner as it's called from the textbox and it should work. To test copy and paste into a file and name it with a .html extension. You will see that it does everything you ask.

<html>
<body>
<input type="text" id="usage" onkeydown="return checkField(this);">
</body>
<script language="javascript">
function checkField(object) {
if (event.keyCode < 48 ¦¦ event.keyCode > 57 ¦¦ document.getElementById("usage").value.length == 3) {
return false;
} // end if
return true;
} // end function
</script>
</html>

rkolsky

5:05 pm on Nov 25, 2004 (gmt 0)

10+ Year Member



Sorry didn't see your last post. Here is how you could do that. Note that document.getElementById works in netscape and versions of IE 5 and higher. For IE 4 you need to use document.all.usage instead. There are other ways to access that I just wanted to make sure you know this won't work in IE4

<html>
<body>
<table>
<tr>
<td>project:</td>
<td>
<select name="project" id="project" size="1">
<option value="">Please choose an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>usage:</td>
<td><input type="text" name="usage" id="usage" onkeydown="return checkField(this);"></td>
</tr>
</body>
<script language="javascript">
function checkField(object) {
if (document.getElementById("project").selectedIndex == 0) {
alert("Attention:\r\rPlease choose a project first");
return false;
} else if (event.keyCode!= 8 && (event.keyCode < 48 ¦¦ event.keyCode > 57 ¦¦ document.getElementById("usage").value.length == 3)) {
return false;
} // end if
return true;
} // end function
</script>
</html>

swati

9:55 am on Nov 26, 2004 (gmt 0)

10+ Year Member



Hi,

There is a hitch. The drop down menus are dynamically generated depeding on some options that user selects. As a result there are several project drop down menus with the id=project . So its like

Project Usage
Project Usage
Project Usage

even if i select a project , i get the alert bcos every other project menu is not selected ....so what do i do to get the right alert n prevent others?

rkolsky

1:08 pm on Nov 26, 2004 (gmt 0)

10+ Year Member



Are they in different forms? I assume so otherwise you will get unpredictable results when you sumbit the form back to the server. specify the form name first in the javascript and then the control and it should work. I wrote two functions. The first will only work in IE. It's shorter code however. The second one is more verbose but should work in most browsers. The second one will not work in IE4 but will in IE5 and above. This was only tested in IE6.

<html>
<body>
<form name="frmOne" id="frmOne">
Form One
<select id="cmbTest" name="cmbTest" size="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<form name="frmTwo" id="frmTwo">
Form Two
<select id="cmbTest" name="cmbTest" size="1">
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<input type="button" value="Check Form One Value" onclick="checkFormOne();">
<br>
<input type="button" value="Check Form Two Value" onclick="checkFormTwo();">
</form>
</body>
<script language="javascript">
function checkFormOne() {
var obj = document.all.frmOne.all.cmbTest
alert(obj.options[obj.selectedIndex].value);
} // end function

function checkFormTwo() {
var objArray = document.getElementById("frmTwo").getElementsByTagName("SELECT");
var obj;
for (var i = 0;i < objArray.length;i++) {
if (objArray[i].id == "cmbTest") {
obj = objArray[i];
break;
} // end if
} // end for
alert(obj.options[obj.selectedIndex].value);
} // end function
</script>
</html>

adni18

1:24 am on Nov 27, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For the regex, try this:

<html>
<body>
<input type="text" id="usage" onkeyup="checkField(this);">
</body>
<script language="javascript">
function checkField(object) {
var regex = /^\d{1,3}$/;
if (!regex.test(object.value)) {
object.value = "";
} // end if
} // end function
</script>
</html>