By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,661 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

Validate multiple form records and highlight errors

P: n/a
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.asp" method="post" name="OrderForm" id="OrderForm">
While NOT rsOrderFormItems.EOF
<tr>
<td><%=(rsOrderFormItems.Fields.Item("ITEM_CODE"). Value)%></td>
<td><%=(rsOrderFormItems.Fields.Item("DESCRIPTION" ).Value)%></td>
<td><input name="ORDER_QTY" id="ORDER_QTY" value="0"></td>
<td><%=(rsOrderFormItems.Fields.Item("MAX_ORDER_QT Y").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.
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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(field, maxValue)
{
if (field && field.value)
{
if (field.value < 0 ||
field.value > maxValue)
{
// invalid data
alert("oops - bad data in "+field.name);
if (field.style) field.style.backgroundColor="yellow";
}
}
}
</script>

<form action="order.asp" method="post" name="OrderForm" id="OrderForm">
While NOT rsOrderFormItems.EOF
maxValue = rsOrderFormItems.Fields.Item("MAX_ORDER_QTY").Valu e
<tr>
<td><%=(rsOrderFormItems.Fields.Item("ITEM_CODE"). Value)%></td>
<td><%=(rsOrderFormItems.Fields.Item("DESCRIPTION" ).Value)%></td>
<td>
<input type="text" name="ORDER_QTY" id="ORDER_QTY" value="0"
onChange="validateField(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

Jul 23 '05 #2

P: n/a
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(field, maxValue)
{
if (field && field.value)
{
if (field.value < 0 ||
field.value > maxValue)
{
// invalid data
alert("oops - bad data in "+field.name);
if (field.style) field.style.backgroundColor="yellow";
}
}
}
</script>

<form action="order.asp" method="post" name="OrderForm" id="OrderForm">
While NOT rsOrderFormItems.EOF
maxValue = rsOrderFormItems.Fields.Item("MAX_ORDER_QTY").Valu e
<tr>
<td><%=(rsOrderFormItems.Fields.Item("ITEM_CODE"). Value)%></td>
<td><%=(rsOrderFormItems.Fields.Item("DESCRIPTION" ).Value)%></td>
<td>
<input type="text" name="ORDER_QTY" id="ORDER_QTY" value="0"
onChange="validateField(this,<%=maxValue%>);">
</td>
<td><%=maxValue%></td>
</tr>
Wend

Jul 23 '05 #3

P: n/a
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="return myValidator(this)">

<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

Jul 23 '05 #4

P: n/a
Red
kaeli wrote:

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

<form onsubmit="return myValidator(this)">

<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.length; i=i+3)
{
x=parseInt((f.elements[i+1].value))
y=parseInt((f.elements[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.asp" method="post" name="frmOrderForm"
id="frmOrderForm" onsubmit="return validateForm()">
Jul 23 '05 #5

P: n/a
Red
To save anyone trying to answer the question below, all sorted now.

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

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

to

for(i = 0; i < (f.elements.length - 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="return myValidator(this)">

<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.length; i=i+3)
{
x=parseInt((f.elements[i+1].value))
y=parseInt((f.elements[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.asp" method="post" name="frmOrderForm"
id="frmOrderForm" onsubmit="return validateForm()">

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.