Validate multiple form records and highlight errors

[Red]

Hi,

I'm not very familiar with Javascript. I usually leave that kind of
stuff up to Dreamweaver, but i'm starting to need a little more than it
can offer.

I have an asp page which creates a form from a record set. Very simply
it lists items that can be ordered by the customer. The customer simply
enters the required qty for each item and hits submit:

<form action="order.a sp" method="post" name="OrderForm " id="OrderForm" >
While NOT rsOrderFormItem s.EOF
<tr>
<td><%=(rsOrder FormItems.Field s.Item("ITEM_CO DE").Value)%> </td>
<td><%=(rsOrder FormItems.Field s.Item("DESCRIP TION").Value)%> </td>
<td><input name="ORDER_QTY " id="ORDER_QTY" value="0"></td>
<td><%=(rsOrder FormItems.Field s.Item("MAX_ORD ER_QTY").Value) %></td>
</tr>
Wend

As you can see, the last column lists the maximum that can be ordered.
What I would like is some simple client side validation that checks that
the value in ORDER_QTY is a number between 0 and MAX_ORDER_QTY (or empty
just in case the user deletes a value). I need the validation to be
done for each record.

Also, as there can be quite a lot of records on a page, aswell as a
message box it would be nice if the textboxes with errors could be
higlighted. Maybe change the class of the textbox?

Any help or pointers would be greatly appreciated.

Many TIA,

Red.

[kaeli]

In article <Wk************ ***@newsfe4-gui.ntli.net>, re*@red.com enlightened
us with...

<td><input name="ORDER_QTY " id="ORDER_QTY" value="0"></td>
Input requires a type attribute, I believe. IMNSHO, it should be there even
if not required, for clarity.

As you can see, the last column lists the maximum that can be ordered.
What I would like is some simple client side validation that checks that
the value in ORDER_QTY is a number between 0 and MAX_ORDER_QTY (or empty
just in case the user deletes a value). I need the validation to be
done for each record.

Also, as there can be quite a lot of records on a page, aswell as a
message box it would be nice if the textboxes with errors could be
higlighted. Maybe change the class of the textbox?

Works in theory. Not tested. Check for typos. Beware of copy/paste with word-
wrap.

<script type="text/javascript">
function validateField(f ield, maxValue)
{
if (field && field.value)
{
if (field.value < 0 ||
field.value > maxValue)
{
// invalid data
alert("oops - bad data in "+field.nam e);
if (field.style) field.style.bac kgroundColor="y ellow";
}
}
}
</script>

<form action="order.a sp" method="post" name="OrderForm " id="OrderForm" >
While NOT rsOrderFormItem s.EOF
maxValue = rsOrderFormItem s.Fields.Item(" MAX_ORDER_QTY") .Value
<tr>
<td><%=(rsOrder FormItems.Field s.Item("ITEM_CO DE").Value)%> </td>
<td><%=(rsOrder FormItems.Field s.Item("DESCRIP TION").Value)%> </td>
<td>
<input type="text" name="ORDER_QTY " id="ORDER_QTY" value="0"
onChange="valid ateField(this,< %=maxValue%>);" >
</td>
<td><%=maxValue %></td>
</tr>
Wend

--
--
~kaeli~
Murphy's Law #3020: Quality assurance doesn't.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Red]

kaeli wrote:

In article <Wk************ ***@newsfe4-gui.ntli.net>, re*@red.com enlightened
us with...

<td><input name="ORDER_QTY " id="ORDER_QTY" value="0"></td>

Input requires a type attribute, I believe. IMNSHO, it should be there even
if not required, for clarity.

Yes, i only simplified the code a bit for this post.

Thanks for the code. Works on a field by field basis, as and when the
user updates textboxes.

The only time this doesn't work is when the user doesn't tab out of the
textbox or clicks elsewhere, but clicks straight on submit button. The
alert shows, but the form still submits.

How could I prevent this happening?

Thanks!

Red.

As you can see, the last column lists the maximum that can be ordered.
What I would like is some simple client side validation that checks that
the value in ORDER_QTY is a number between 0 and MAX_ORDER_QTY (or empty
just in case the user deletes a value). I need the validation to be
done for each record.

Also, as there can be quite a lot of records on a page, aswell as a
message box it would be nice if the textboxes with errors could be
higlighted. Maybe change the class of the textbox?

Works in theory. Not tested. Check for typos. Beware of copy/paste with word-
wrap.

<script type="text/javascript">
function validateField(f ield, maxValue)
{
if (field && field.value)
{
if (field.value < 0 ||
field.value > maxValue)
{
// invalid data
alert("oops - bad data in "+field.nam e);
if (field.style) field.style.bac kgroundColor="y ellow";
}
}
}
</script>

<form action="order.a sp" method="post" name="OrderForm " id="OrderForm" >
While NOT rsOrderFormItem s.EOF
maxValue = rsOrderFormItem s.Fields.Item(" MAX_ORDER_QTY") .Value
<tr>
<td><%=(rsOrder FormItems.Field s.Item("ITEM_CO DE").Value)%> </td>
<td><%=(rsOrder FormItems.Field s.Item("DESCRIP TION").Value)%> </td>
<td>
<input type="text" name="ORDER_QTY " id="ORDER_QTY" value="0"
onChange="valid ateField(this,< %=maxValue%>);" >
</td>
<td><%=maxValue %></td>
</tr>
Wend

[kaeli]

In article <1v************ ***@newsfe1-win.ntli.net>, re*@red.com enlightened
us with...

The only time this doesn't work is when the user doesn't tab out of the
textbox or clicks elsewhere, but clicks straight on submit button. The
alert shows, but the form still submits.

How could I prevent this happening?

You can't. Not with JUST handling onchange.
Put an onsubmit handler in to call the function for every element and return
false if any fail.

<form onsubmit="retur n myValidator(thi s)">

<script type="text/javascript">
function myValidator(frm )
{
// for each text element in frm, do
// get value of function check
// if bad, return false, else loop
return true;
}

If you need help with that, let me know.

--
--
~kaeli~
With her marriage, she got a new name and a dress.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Red]

kaeli wrote:

Put an onsubmit handler in to call the function for every element and return
false if any fail.

<form onsubmit="retur n myValidator(thi s)">

<script type="text/javascript">
function myValidator(frm )
{
// for each text element in frm, do
// get value of function check
// if bad, return false, else loop
return true;
}

If you need help with that, let me know.

Appreciate your help. From much googling, i've got things half working,
but as I'm not that familiar with javascript, i'd appreciate a little
more help. The following loops through the fields, and highlights the
boxes that fail validation. I see the boxes change colour in the split
second before the form submits. But the form always submits.

What needs to happen is that at the end of the 'for' loop, if any
textboxes have failed the validation, the form should not submit. If
all textboxes passed the validation, then the form can submit OK.

function validateForm()
{
var z=true;
var f = document.forms['frmOrderForm'];
for(i = 0; i < f.elements.leng th; i=i+3)
{
x=parseInt((f.e lements[i+1].value))
y=parseInt((f.e lements[i+2].value))
if((x < 0 || x > y))
{
f.elements[i+1].className = 'frmInvalid';
z=false;
}
else
{
f.elements[i+1].className = 'frmValid';
}
}
if(z==false)
{
alert("Please ammend highlighted fields")
}
return z;
}

<form action="order.a sp" method="post" name="frmOrderF orm"
id="frmOrderFor m" onsubmit="retur n validateForm()" >

[Red]

To save anyone trying to answer the question below, all sorted now.

Didn't realise that f.elements.leng th includes any buttons on the form.
Changed the line:

for(i = 0; i < f.elements.leng th; i=i+3)

to

for(i = 0; i < (f.elements.len gth - 2); i=i+3)

to cancel out the submit and cancel button, and it worked perfectly!
Red wrote:

kaeli wrote:

Put an onsubmit handler in to call the function for every element and
return false if any fail.

<form onsubmit="retur n myValidator(thi s)">

<script type="text/javascript">
function myValidator(frm )
{
// for each text element in frm, do
// get value of function check
// if bad, return false, else loop
return true;
}

If you need help with that, let me know.

Appreciate your help. From much googling, i've got things half working,
but as I'm not that familiar with javascript, i'd appreciate a little
more help. The following loops through the fields, and highlights the
boxes that fail validation. I see the boxes change colour in the split
second before the form submits. But the form always submits.

What needs to happen is that at the end of the 'for' loop, if any
textboxes have failed the validation, the form should not submit. If
all textboxes passed the validation, then the form can submit OK.

function validateForm()
{
var z=true;
var f = document.forms['frmOrderForm'];
for(i = 0; i < f.elements.leng th; i=i+3)
{
x=parseInt((f.e lements[i+1].value))
y=parseInt((f.e lements[i+2].value))
if((x < 0 || x > y))
{
f.elements[i+1].className = 'frmInvalid';
z=false;
}
else
{
f.elements[i+1].className = 'frmValid';
}
}
if(z==false)
{
alert("Please ammend highlighted fields")
}
return z;
}

<form action="order.a sp" method="post" name="frmOrderF orm"
id="frmOrderFor m" onsubmit="retur n validateForm()" >