PDA

View Full Version : validation problem



SunJune
01-31-2011, 06:19 PM
Hi,

I have got a validation problem in my javascript. The user needs to enter into "city" text box and also to select a state from a drop down list. The problem is that the function "checkValue" goes into the loop. Can anybody pinpoint the problem?




<INPUT TYPE='text' NAME='city' size='50' maxlength='50' id="City" onBlur="return checkValue(this),onchange= compLoop
<select name='state' class='dropdown' id="State" onblur="return checkValue(this),onchange= compLoop()">
<option selected value=''>Select a State
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
</select>
<INPUT TYPE='text' NAME='zip' size='10'maxlength='10' id="Zip" onBlur="return checkValue(this),onchange= compLoop()">


This is the function checkValue()


function checkValue(textbox)
{
if(textbox.value==""||textbox.value==null)
{
alert("Please enter the value for "+ textbox.id);
textbox.style.background='pink';
textbox.focus();
return false;
}

else
{
textbox.style.background='white';
return true;
}
}

Philip M
01-31-2011, 07:14 PM
Quite a lot of problems here. You seem to be attempting to validate different textboxes with the same function. This should move you forward:-


<form name = "myform">
<input type='text' name='city' id="City" size='50' maxlength='50' onblur = "checkValue()">

<select name='state' id="State" class='dropdown' onchange ="return checkValue()">
<option selected value=''>Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>

<input type ='text' name='Zip' size='10'maxlength='10' id="Zip" onchange="return checkZIPvalue()">
</form>

<script type = "text/javascript">

function checkValue(){
document.myform.city.style.background = "white";
var val = document.myform.city.value;
val= val.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
val = val.replace(/[^a-z\-\s]/gi,""); // strip inappropriate characters - not a-z hyphen space
document.myform.city.value = val; // write it back to the field
if (val.length < 4) { // city name must be a least 4 letters
alert ("Please enter the name of a city");
document.myform.city.value = "";
document.myform.city.style.background = "pink";
setTimeout("document.myform.city.focus()", 25);
return false;
}
}

function checkZIPvalue() {
document.myform.Zip.style.background = "white";
var zip = document.myform.Zip.value;
if (!/^[1-9]\d{4}$/.test(zip)) { // five digits starting with 1-9 only
alert ("You must enter a valid USA zip code")
document.myform.Zip.value = "";
document.myform.Zip.style.background = "pink";
setTimeout("document.myform.Zip.focus()", 25);
return false;
}
}

</script>


The secret of success in life is honesty and fair dealing. If you can fake that, you've got it made. - Groucho Marx (1890 - 1977)

SunJune
02-03-2011, 01:36 PM
Thanks Philip, sorry for the delay in response, was not well.
I did try earlier before posting this post, to give another function for the checking the state(although not as sophisticated like yours) which is as below, but nothing changed.
If the user doesnt provide any value to "City", it generates an alert, and then generates another alert for the "State". These alerts(pop ups) want stop, until I kill the process using task bar.

I dont know what's missing or causing the trouble.



function checkState(state)
{
var index= state.selectedIndex;
if(index==0)
{
alert("Please select a state");
document.form.state.focus();
return false;
}
else
{
state.style.background='white';
return true;
}
}

Philip M
02-03-2011, 02:11 PM
You cannot change the background color of a select list - only the background color of the options.


<form name = "myform">
<select id = "state" onchange = "checkState(this)">
<option value = "" style="background-color: red">Select....</option>
<option value = "MA" style="background-color: red">MA</option>
<option value = "MA" style="background-color: red">CA</option>
<option value = "NY" style="background-color: red">NY</option>
</select>
</form>

<script type = "text/javascript">

function checkState(state) {
var index= state.selectedIndex;
alert (index); // for testing
if (index==0) { // (re)set background to red
var len = state.options.length;
for (var i = 0; i<len; i++) {
state.options[i].style.background='red';
}
alert ("Please select a state");
return false;
}

else { // change background to white if a state selected
var len = state.options.length;
for (var i = 0; i<len; i++) {
state.options[i].style.background='white';
}
return true;
}
}

</script>

"When two trains approach each other at a crossing, both shall come to a full stop and neither shall start up again until the other has gone." Kansas State Legislature, early 1890's

SunJune
02-03-2011, 02:37 PM
That's working! thanks for pointing my mistake. May be that's why it was going into loop.