473,325 Members | 2,816 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

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.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
5 2568
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Sans Spam | last post by:
Greetings! I have a table that contains all of the function permissions within a given application. These functions are different sections of a site and each has its own permissions (READ, WRITE,...
3
by: Simon Rowe | last post by:
Probably really simple but I cant work it out... I have a list box on a form with a few records in. When I open the form the first record is sort of highlight with a dashed box, when I cursor...
11
by: dskillingstad | last post by:
I've been struggling with this problem for some time and have tried multiple solutions with no luck. Let me start with, I'm a novice at Access and I'm not looking for someones help to design my...
4
by: Matt Ratliff | last post by:
Hello, I would appreciate any assistance you have with the following problem: I have (as an example) an array of values as follows: arrayvalues=new Array("0001","0003","0005") where each is the...
4
by: ApexData | last post by:
I have a continuous form that has Allow- Add/Edit/Del set to False, so that the form is in View mode only. I have New/Edit/Del buttons in the form header. My New & Edit buttons work as a like. ...
2
by: Neo Geshel | last post by:
Greetings, I have a form with a telephone field. It is very specific, as it has four text boxes - the country code, area code, prefix and suffix. I can validate each of them individually, but...
1
by: Muchach | last post by:
Hello, Ok so what I've got going on is a form that is populated by pulling info from database then using php do{} to create elements in form. I have a text box in each table row for the user to...
1
by: SkipNRun | last post by:
I am a novice when comes to JavaScript, AJAX. I am working on a form, which will allow users to update their contact information. In order to make the form flexible, I need to use pull down list. ...
1
by: mbarnhizer | last post by:
Hello All, Trying to figure out how to validate a series of questions on an online test. I am thinking that VB or Javascript is the best route, but your input may make a difference. The site i...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.