javascript client validation check

adamhw · August 16th, 2010, 07:01 AM

Hi there

I have a form that asks for various details about children for accommodation reasons:

<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<th scope="col"><select name="TxtCTitle3" class="bodytext2" id="TxtCTitle2">
<option>Mr</option>
<option>Miss</option>
</select></th>
<td scope="col"><input name="txtCFirstName3" type="text" class="TextBox" id="txtCFirstName3" size="25"></td>
<td scope="col"><input name="txtCSurname3" type="text" class="TextBox" id="txtCSurname3" size="25"></td>
<td scope="col"><input name="txtCAge3" type="text" class="TextBox" id="txtCAge3" style="width:40px;"></td>
<td scope="col"><div align="center">
<select name="txtCCot3" class="TextBoxBooking" id="txtCCot3">
<option value="" selected>Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div></td>
<td scope="col"><div align="center">
<select name="txtCHighChair3" class="TextBoxBooking" id="txtCHighChair3">
<option value="" selected>Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div></td>
<td scope="col"><div align="center">
<select name="txtCBedGuard3" class="TextBoxBooking" id="txtCBedGuard3">
<option value="" selected>Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div></td>
<td scope="col"><div align="center">
<select name="txtCZBed3" class="TextBoxBooking" id="txtCZBed3">
<option value="" selected>Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div></td>
</tr>
</table>

I need some client validation whereby if txtCFirstName3 is completed then they must also complete txtCCot3, txtCHighChair3, txtCBedGuard3, txtCZBed3.

Wondering if someone could point me in the right direction.

Many thanks

Adam

Old Pedant · August 16th, 2010, 02:38 PM

Dare I guess that you need the same code for txtCFirstName1, txtCFirstName2, txtCFirstName4, etc.???

That is, you have a set of form fields for each FirstName that only differ by the suffix number???

The problem is trivial if you really ONLY have txtCFirstName3, but it's not a big deal to handle multiple numbers, if needed.

adamhw · August 17th, 2010, 05:29 AM

Hi Old Pedant

Indeed, you are correct, there will be 3 of each differing by 1,2,3, so multiple numbers.

Is this a more difficult scenario?

thanks

Adam

Old Pedant · August 17th, 2010, 03:07 PM

Code:

<script type="text/javascript">
function validateSet( form, setnum )
{
    var tfld = form.elements["txtCFirstName" + setnum];
    var name = tfld.value.replace(/[^a-zA-Z]/g, "" ); // zap non letters for check
    if ( name == "" )
    {
        tfld.value = "";
        return true; // no name, so no check needed
    }

    var nameRE = /^[a-zA-Z]{2,99}$/;
    if ( ! nameRE.test( name ) )
    {
        alert("Child name " + setnum + " must be at least two letters long" );
        return false;
    }
    // okay, name seems valid...
    if ( form.elements["txtCCot"+setnum].selectedIndex == 0 )
    {
         alert("Must specify number of cots for child " + setnum);
         return false;
    }
    if ( form.elements["txtCHighChair"+setnum].selectedIndex == 0 )
    {
         alert("Must specify number of high chairs for child " + setnum);
         return false;
    }
    if ( form.elements["txtCBedGuard"+setnum].selectedIndex == 0 )
    {
         alert("Must specify number of bed guards for child " + setnum);
         return false;
    }
    if ( form.elements["txtCZBed"+setnum].selectedIndex == 0 )
    {
         alert("Must specify number of beds for child " + setnum);
         return false;
    }
    return true; // all okay
}

function validateForm( form )
{
    if ( ! validateSet( form, 1 ) || ! validateSet( form, 2 ) || ! validateSet( form, 3 ) )
    {
         return false;
    }
    ... do any more validations here ...

    return true;
}
</script>
...
<form name="whatever" action="xxx" method="post" onsubmit="return validateForm(this);">
...

Does that do it?

chroniclemaster1 · August 18th, 2010, 12:39 AM

Quote:

Originally Posted by adamhw

Hi Old Pedant

Indeed, you are correct, there will be 3 of each differing by 1,2,3, so multiple numbers.

Is this a more difficult scenario?

As you can see, it's a little more difficult, but not by much. The idea is that since you have variables which differ only by the numeric digits, you simply create a function that parameterizes that portion of the name and cycles through the different possibilities. You can even execute this solution when you have items that don't share similar names. You simply insert each of the variable names into an array and loop through each array index. That's a handy trick I use to write code that's more self-documenting, but I'm not sure there's any better naming scheme than child1, child2, and child3. ;)

Then you just check each of the other fields to ensure that they are not empty strings, "", ie that people have entered content for them, and display an appropriate error message if not.

adamhw · August 18th, 2010, 02:42 AM

Great, thanks very much guys for your input and help - I'll give it a bash and see what happens!

thanks again.

Adam

adamhw · August 19th, 2010, 09:31 AM

Hi there

Well your code works a treat Old Pedant - thanks so much.

I'm just putting in some more validation checks where you specify like so:

{
if ( ! validateSet( form, 1 ) || ! validateSet( form, 2 ) || ! validateSet( form, 3 ) )
{
return false;
}
//... do any more validations here ...

if (objForm.txtName.value == "")
{
window.alert("Name is a required Field");
objForm.txtName.focus();
return false;
}

return true;
}
</script>

but it's not giving me a prompt for them when I submit the form - is there something I'm missing?

thanks

Adam

Old Pedant · August 19th, 2010, 01:23 PM

Where did objForm come from????

If you used my code, you should be using form in place of objForm. But you don't show all the code, so I can't tell for sure.

adamhw · August 25th, 2010, 09:15 AM

Thanks Old Pedant - yet again you are correct!

Many thanks

Adam