Form Validation Without Alert Box or Refresh?

Swiftly · Dec 22, 2002

I want to be able to validate a form, by putting either a red asterisk, or an exclamation image (!) next to the textbox so when the user hits SUBMIT, the image or * just automatically appears, without having to have the form refresh.

Does anyone know how this is done?

Thanks!
(I'm fairly new to ASP so try to give me the basics if you can!)

Tarwn · Dec 22, 2002

The only way to do this without refreshing would be to use client-side scripting. This means either client-side VBScript or client-side Javascript.
Basically what you will want to do is create a function to validate all of your inputs. The easiest way to make something appear on a webpage is if it is already there, so you will want to have your asterisks there ahead of time, just invisible.
For example:
We have this form:

Code:

<form method=&quot;POST&quot; action=&quot;myOtherPage.asp&quot; name=&quot;frmUserInfo&quot;>
Enter Name: <input type=&quot;text&quot; name=&quot;txtUserName&quot;><span style='color:red;display:none;' id='txtUserName_error'>*</span><br>
Favorite Color: <input type=&quot;text&quot; name=&quot;txtColor&quot;><span style='color:red;display:none;' id='txtColor_error'>*</span><br>
<input type=&quot;submit&quot; value=&quot;Submit!&quot;>
</form>

As you can see I have already added the invisible red asterisks. Now what we want to do is have the form validate when the user clicks the submit button, here is one method to do this: Add the function call to the form tag

Code:

<form method=&quot;POST&quot; action=&quot;myOtherPage.asp&quot; name=&quot;frmUserInfo&quot; onSubmit=&quot;validateForm();&quot;>

Now that we have the function call we need to actually validate it in our javascript function, so here is a possibility for the head section of our page:

Code:

<html>
<head>
<script language=&quot;JavaScript&quot;>
<!--
function validateForm(){
	var errorFlag = false;
	//Check our name input
	if(frmUserInfo.txtUserName.value.length == 0){
		//show the asterisk and set the flag
		document.getElementById(&quot;txtUserName_error&quot;).style.display='inline';
		errorFlag = true;
	}

	//check our color input
	if(frmUserInfo.txtColor.value.length == 0){
		//show the asterisk and set the flag
		document.getElementById(&quot;txtColor_error&quot;).style.display='inline';
		errorFlag = true;	
	}

	if(errorFlag == true){
		alert(&quot;You have missed one or more entries, please fill out all fields marked with a red asterisk.&quot;);
	}
}
//-->
</script>
</head>

In this case it keeps track of whether there are any errors with the errorFlag variable so that we can tell the user there are errors after we have marked them all. Since we set the id's on the spans similar to the input fields it is easy for us to remember and then access them in the above script to make them visible.

Some thing to consider:
1) You should probably place else statements on your if statements in the javascript to turn the asterisks invisible ( display="none" ) if the entry isn't invalid, this way if the user corrects one input but not a second, the first asterisk will disappear when they try to resubmit, only leaving the incorrect input marked.
2) Obviously you will want validation beyond simple length checks, but this should give you a starting point
3) Placing an image inside the error span will work just as well as a red asterisk, so you can actually mix and match or play around with differant symbols to find the best one for your needs.
4) While it is not necessary to have abn alert, it might be a good idea to give your visitor some idea why the form didn't submit, otherwise a good number of them will not notice the red asterisk(s) the first time they click, and continue clicking tyhe submit button until they either give up and go away or give up and email you "broken page" emails.

-Tarwn Experts are only people who have realized how much they will never know about a language.
________________________________________________________________________________
Want to get great answers to your Tek-Tips questions? Have a look at faq333-2924

Swiftly · Dec 22, 2002

Wow,

A sunday night, and I get an awesome reply like that!?

Thanks a tonne! I have been working on using an image instead of just an asterisk.

Can I do it this way? Swapping an image in there instead of an asterisk?

<span style='display:none;' id='txtUserName_error'>
<IMG SRC="/images/warning.gif" name= "imgWarning"></span>

and then set it to visible in the validate function like this:

document.getElementById("txtColor_error&quot

.style.display='inline';

Thank you so much for your help.
(I will try this IMG thing, and see if it works.. I just wanted to post this in case you already knew a problem I would run into... thank you very much!)

Swiftly · Dec 22, 2002

sorry, I guess I was a little anxious at trying the code, and I overlooked your # 3) note above!

However, I do have one problem. When I hit submit, I have an appropriate IMG appearing, however the form still submits... how do i keep this form from submitting if there is an error?

I can't find the page I was looking at yesterday, but it said something about having to change the submit button to a "button" type, and then submit the form through javascript?

Any help on that would be great, thanks again for all your help!

Swiftly · Dec 22, 2002

I know this is a pain in the butt, but I didn't want to leave anything out... that might be causing this to not work.. I can't seem to figure out why this code isn't working anymore... It submits when the fields are blank or not..

Thanks .AGAIN!!!!!!

<script language="JavaScript1.1">

function validateForm(){
var errorFlag = true;
//Check our name input
if(frmUserInfo.fName.value.length == 0)
{
//show the IMG and set the flag
document.getElementById("txtfName_error&quot

.style.display='inline';
errorFlag = true;
}

if(frmUserInfo.lName.value.length == 0)
{
//show the IMG and set the flag
document.getElementById("txtlName_error&quot

.style.display='inline';
errorFlag = true;
}

if(errorFlag)
{
return false;
else
{
return true;
}
}

}
</script>

<HTML>
<BODY>
<form method="POST" action="rancherAdded.asp" onSubmit="return validateForm();" name="frmUserInfo">
<TABLE BORDER = "1">
<TR>
<TD align="right">
<span style='display:none;' id='txtUserName_error'>
<IMG SRC= "images/warning.gif"></span>
</TD>
<TD>
First Name:
</TD>
<TD>
<input type="text" name="fName" size="20">
</TD>
</TR>
<TR>
<TD align="right">
<span style='display:none;' id='txtlName_error'>
<IMG SRC= "images/warning.gif"></span>
</TD>
<TD>
Last Name:
</TD>
<TD>
<input type="text" name="lName" size="20">
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
Notes:
</TD>
<TD>
<textarea rows="5" name="notes" cols="51"></textarea>
</TD>
</TR>
<TR>
<TD>
<input type="submit" value="Submit" name="submit">
</TD>
<TD>
<input type="reset" value="Reset" name="reset">
</TD>
</TR>
</TABLE>
</form>

<%

dim oConn
dim str

Set oConn = Server.CreateObject("ADODB.Connection&quot

oConn.Open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("\bswiftly\db\Ranch.mdb&quot

)

str = "INSERT INTO tblRancher (FirstName, LastName, Notes)"
str = str & " VALUES ('" & Request.Form("fName&quot

&"','" & Request.Form("lName&quot

str = str & "','" & Request.Form("notes&quot

& "')"

if Request.Form("fName&quot

<>"" then
oConn.Execute(str)
End if

%>
</BODY>
</HEAD>

TechnicalAnalysis · Dec 22, 2002

Yes, you can achieve that by changing it to button input type and remove onSubmit="validateForm(); from <form method="POST" action="myOtherPage.asp" name="frmUserInfo" onSubmit="validateForm();">

Instead you need to add onClick=validateForm(); into the input button type.

The last part of the validateForm() needs to be changed to if(errorFlag == true){
alert("You have missed one or more entries, please fill out all fields marked with a red asterisk.&quot

;
} else {document.frmUserInfo.submit();}

Tarwn · Dec 23, 2002

That actually isn't necessary, just another way to do it. This line:

Code:

<span style='display:none;' id='txtUserName_error'>

is probably where the problem is occurring. What is most likely happening is that your are leaving the first line blank, it is looking for an id = "txtfName_error" and not finding it, than continuing to the next page.

My mistake, just noticed another one:

Code:

 if(errorFlag)
      {
          return false;
      else
      {
          return true;
      }
    }

The brackets above are out of place, try this:

Code:

 if(errorFlag)
      {
          return false;

}

Code:

      else
      {
          return true;
      }

anf the errorFlag should be intialized as false instead of true, otherwise it will never get submitted. I am betting you did this as a test, but just wanted to remond you because I know how frustrating it can be to waste a half hour and then realize something like that was hanging you up

Also the structure of your page should be:

Code:

<html>
<head>
script tags here
</head>
<body>
display tags here
</body>
</html>

And you will need to move your ASP to another page (ie the page the form submits to). Since the ASO is server-side code it is executed first, before the page is sent to the client. So right now it is probably attempting to to insert blanks into your db, try moving that code to the rancherAdded.asp file

Note: After making the above changes and not others the form submits just fine for me, so it was actually a combination of the 2 javascript problems that was causing the error. The other javascript problem, the structure problem, and the ASP problem where just staving off future issues

I hope this helps you get your sample working, good luck on the full size one as well, let us know how things go, or if you get stuck post

-Tarwn Experts are only people who have realized how much they will never know about a language.
________________________________________________________________________________
Want to get great answers to your Tek-Tips questions? Have a look at faq333-2924

Swiftly · Dec 23, 2002

Alright,

I'm stuck again.

I'm not 100% sure how the 'submit' works on my form, or how it updates my database. As you see I create a connection to the database and execute an SQL string which updates the database. I have tried to put that code in a function and to call that function at the end of the validate method if the validate finds no errors.... however I haven't gotten this to work.

This is my insert statement:

<%
dim oConn
dim str

Set oConn = Server.CreateObject("ADODB.Connection&quot

oConn.Open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("\bswiftly\db\Ranch.mdb&quot

)

str = "INSERT INTO tblRancher (FirstName, LastName, Notes)"
str = str & " VALUES ('" & Request.Form("fName&quot

&"','" & Request.Form("lName&quot

str = str & "','" & Request.Form("notes&quot

& "')"

oConn.Execute(str)

Response.redirect ("RancherAdded.asp&quot

%>

you said that you wanted me to put this code into the RancherAdded.asp page? Because this is the next form, I will still be able to access the fName, and "notes" properties through Request.Form right?

This is the code I have in my page so far, and It is validating and changing the images, but as soon as I hit OK on the alert box, it redirects ? ? ?

(I haven't been able to get it working with the "button" type, instead of the submit type either).

<HTML>
<HEAD>
<script language="JavaScript1.1">
function validateForm()
{
var errorFlag = false;
//Check our name input
if(frmUserInfo.fName.value.length == 0)
{
//show the IMG and set the flag
document.getElementById("txtfName_error&quot

.style.display='inline';
errorFlag = true;
}

if(frmUserInfo.lName.value.length == 0)
{
//show the IMG and set the flag
document.getElementById("txtlName_error&quot

.style.display='inline';
errorFlag = true;
}
if(errorFlag)
{

}
else
{
document.frmUserInfo.submit();
}
}
</script>

</HEAD>

<BODY>
<form method="POST" action="doAddRancher.asp" name="frmUserInfo" onSubmit="validateForm();">
<TABLE BORDER = "1">
<TR>
<TD align="right">
<span style='display:none;' id='txtfName_error'>
<IMG SRC= "images/warning.gif"></span>
</TD>
<TD>
First Name:
</TD>
<TD>
<input type="text" name="fName" size="20">
</TD>
</TR>
<TR>
<TD align="right">
<span style='display:none;' id='txtlName_error'>
<IMG SRC= "images/warning.gif"></span>
</TD>
<TD>
Last Name:
</TD>
<TD>
<input type="text" name="lName" size="20">
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
Notes:
</TD>
<TD>
<textarea rows="5" name="notes" cols="51"></textarea>
</TD>
</TR>
<TR>
<TD>
<input type="submit" value="Submit" name="submit">
</TD>
<TD>
<input type="reset" value="Reset" name="reset">
</TD>
</TR>
</TABLE>
</form>

</BODY>
</HEAD>

Tarwn · Dec 23, 2002

You can't call server-side functions from client-side code. Once the server-side code has generated the page or done anything else it is doing, it is finished. It sends the page to the user and exits.
What you need to do is put your submission code in the next page, the page the form is submitting to. Your right about the Request.Form values.

The Request object accesses the data that has been sent from a form. So if page1.asp has a form in it with the action set to page2.asp, then page2.asp can use the Request object to get the values of the inputs from page1.
Page1, however, cannot use the Request object to get values from itself because the user hasn't even seen the page yet, let alone filled anything out. By the time the user sees the page the server-side code is done and exited.

Hope that was all clear, I just had a big lunch so I might be a little fuzzy in the head

-Tarwn Experts are only people who have realized how much they will never know about a language.
________________________________________________________________________________
Want to get great answers to your Tek-Tips questions? Have a look at faq333-2924

Swiftly · Dec 23, 2002

Thanks,

I realised that serverside/client side difference since my last post. However this page won't submit:

<form method="POST" name="frmUserInfo" action="doAddRancher.asp">

<input type="button" value="Submit" name="submit" OnClick="validateForm();">

and then in the validate form method, I have this:

if(errorFlag)
{
alert("Error, resubmit&quot

;
}
else
{
self.document.frmUserInfo.submit();
}

and it doesn't submit!

any ideas?!?

Tarwn · Dec 23, 2002

Try removing the self from that and just use:
document.frmUserInfo.submit();

-Tarwn Experts are only people who have realized how much they will never know about a language.
________________________________________________________________________________
Want to get great answers to your Tek-Tips questions? Have a look at faq333-2924

Swiftly · Dec 23, 2002

I figured it out..

the submit buttons name was "submit" so when i called document.frmUserInfo.submit() it was looking for the property, not the method!

thanks a tonne for your help!
this way of validating is great!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form Validation Without Alert Box or Refresh?

Swiftly

Programmer

Tarwn

Programmer

Swiftly

Programmer

Swiftly

Programmer

Swiftly

Programmer

TechnicalAnalysis

Programmer

Tarwn

Programmer

Swiftly

Programmer

Tarwn

Programmer

Swiftly

Programmer

Tarwn

Programmer

Swiftly

Programmer

Similar threads

Part and Inventory Search

Sponsor