PDA

Click to See Complete Forum and Search --> : problem while validating drop down menu and text field

javascriptuser1
11-19-2003, 05:10 AM
hi all,
i have to validate the drop down menu.if user select civilid menu drop down then i should validate
1)user shuld enter civlild in text field
2)it should not be less than 12 numbers and should not be greater than 12 numbers

till now everthing is fine
for me 1 and 2 is working fine.

if user selects passport or driving licence from drop down there should be any validation and this is not working.

i mean when the user select passport or driving licence it still alerting me enter 12 number only.

how to overcome this small problem.
here is my code.


<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var menu_selection="";
function checkForm() {
if (dropDownMenu() && checktext()) {
alert("\nForm has been filled out correctly.");
}
}
function dropDownMenu(form) {
var myindex=document.forms[0].menu.selectedIndex;
if (myindex==0) {
alert("\nYou must make a selection from the drop-down menu.");
document.forms[0].menu.focus();
}
else {
menu_selection=document.forms[0].menu.options[myindex].value;
alert (menu_selection);
return true;
}
}
function checktext()
{
if (document.forms[0].menu.selectedIndex==1)
{
alert("please enter civild id ");
document.forms[0].civilid.focus();
return false;
}
else if ((document.forms[0].menu.selectedIndex==1) && (document.forms[0].civilid.value.length >12) || (document.forms[0].civilid.value.length <12))
{
alert("enter 12 Number only");
document.forms[0].civilid.focus();
return false;
}
else if (isNaN(document.forms[0].civilid.value))
{
alert("Please insert numeric only");
document.forms[0].civilid.focus();
return false;
}
}


</SCRIPT>


<BODY>

<CENTER>
<FORM>
<TABLE WIDTH=500>
<TR>
<TD><SELECT NAME="menu" SIZE=1>
<OPTION SELECTED VALUE=""> --- select ---
<OPTION VALUE="civilid">civildid </option>
<OPTION VALUE="passport">passport </option>
<option value="Driving licence">Driving licence</option>
</SELECT>
</TR>
<tr>
<td><input type="text" name="civilid"></td>
</tr>

</TABLE>

<TABLE>

<TD align="center"><INPUT TYPE="button" VALUE="Check" onClick="checkForm()">

</TABLE>
<table>

</FORM>
</CENTER>:confused:
Charles
11-19-2003, 06:38 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input, select {display:block}
-->
</style>

<script type="text/javascript">
<!--
function checkId (e) {
switch(e.form.idType.value) {
case '':
alert ('Please specify an ID Type.');
e.form.idType.focus();
break;
case 'civilid':
if (!/^\d{12}$/.test(e.value)) {alert ('Please enter 12 digits.'); e.value = ''; e.focus()};
break;
}
}
// -->
</script>

<form action="">
<div>
<label>ID Type<select id="idType">
<option selected>--- select ---</option>
<option value="civilid">CivilID</option>
<option value="passport">Passport</option>
<option value="driversLicence">Driver's Licence</option>
</select></label>
<label>ID<input type="text" onchange="checkId (this)"></label>
<button type="submit">Submit</button>
</div>
</form>
javascriptuser1
11-20-2003, 02:16 AM
hi,
excellent solution.but there is a minor bug is there
if user select civlild from drop down and press the tab without entering anyting in the text field it wont validate the user to enter numbers in the text field.
i mean instead of onchange event if we the call the funtion onclick on the buttion i think it would be better.

i am not an expert but just i am thinking to do like.am i right?please let me know?


waiting for expert solution.