required field for form

[gcapp]

I hope someone can help. I took my a ton of hours to get my email form to work right because it has 50 some odd boxes.

I would like to have one field in my form to be required, that being the email, which is called Strrequired_email in the code.

Now I have had a few people send me examples, but the examples don't exactly match my form, so I'm not sure how to do it.

So I have attached my page to this note. I know it is very, very long, but if someone can see how I can make the Strrequired_email a required field, it will very much appreciated.

Thank you.

[whammy]

This should work... although you might want to redisplay the variables that were posted when redisplaying the form (so people don't have to fill it out all over again).

[gcapp]

Whammy,
I don't want to sound like an idiot (but then again I am new to asp, so.........)

What do you mean (code wise) by "redisplay the variables that were posted when redisplaying the form"

This email form is so huge that I'm not sure what to do about that.

Does that mean that if someone doesn't put an email address in the proper box that something should happen??

Forgive me - I'm new.

Gary

[gcapp]

Whammy,
The form worked and i see what you mean - if I don't put an email address into the box, it returns just the form.

So what shoudl I do about that??

Any simple ideas?

[oracleguy]

He means to have ASP fill out the fields for the person. Because if they don't fill in one of the required fields and the page reloads, they'd have to fill out the entire form again. See example below:


<input type="text" id="sample" value="<%= Request.Form("sample") %>" />


This makes it simple because if they haven't submit the form yet, it will be empty but if they have and you reload the page because of an error, it has the value they last entered.

[gcapp]

Oracleguy,
Ok I understand what you mean, but in the code below would it go like this:

<tr>
<td width="61"><b><font face="Arial" size="1">*Email:</font></b></td>
<td width="389"><font face="Arial" size="2"><input type="text" name="required_email" size="30"><b>(*must
be filled in!!)</b></font></td>
</tr>


<tr>
<td width="61"><b><font face="Arial" size="1">*Email:</font></b></td>
<td width="389"><font face="Arial" size="2"><input type="text" id="name@whatever.com" value=<% Request.Form ("required_email") %> size="30"><b>(*must
be filled in!!)</b></font></td>
</tr>


IF this is not correct, could you show me where it would go in my attached page??

Thanks,
Gary

[oracleguy]

Originally posted by gcapp

<tr>
<td width="61"><b><font face="Arial" size="1">*Email:</font></b></td>
<td width="389"><font face="Arial" size="2"><input type="text" name="required_email" value="<% Request.Form ("required_email") %>" size="30"><b>(*must
be filled in!!)</b></font></td>
</tr>


This ^^^^ is the correct method.

id and name mean the same thing. I'm just in the habit of writing XHTML which you have to use id instead of name.

[whammy]

Actually, "name" isn't deprecated for XHTML 1.1 (or 1.0) regarding forms, except in the form tag... You can still use name for form elements. And id works just fine for the form tag, at least as far back as NS 4.78 (which is as far back as I care to test it).

Also, to add to what oracleguy posted, I'd do a couple of extra things to make sure that the user's input doesn't break your page:

<%
Function NullToEmpty(str) ''''''''''''''''''''''''
If IsNull(str) Then str = ""
NullToEmpty = str
End Function '''''''''''''''''''''''''''''''''''''
%>

<tr style="font-family: arial, helvetica; font-size: 12pt">
<td width="61"><b>*Email:</b></td>
<td width="389">
<input type="text" name="required_email"
value="<% Server.HTMLEncode(NullToEmpty(Request.Form("required_email"))) %>"
size="30" />(must be filled in!!)
</td>
</tr>


Server.HTMLEncode ensures that if the user inputs any potentially harmful text (such as HTML tags) into your form that it won't break the display of your HTML page. Keep in mind when using this that you only use it when you display a variable, however... since if you encode the variable when you request it, then it may change the variable's value... (perhaps increasing the length of the variable, since something like "&" would be converted to "&amp;"... which could result in truncation errors in your database, since the length of the data has increased!).

The NullToEmpty function ensures that ASP doesn't throw an error when using the built-in Server.HTMLEncode function (or any other built-in string manipulation functions) if the field is requested from a database and is returned as null.

If you're not requesting the text from a database you can leave the NullToEmpty function out (and of course eliminate the extra parentheses).

Since you aren't getting this value from a database, I'd eliminate that part... I just included it as an example.

P.S. I definitely agree with oracleguy on this fact though... web developers should really try to learn XHTML standards for a few reasons:

1. If and when (and they probably will) XHTML standards really take off, they will allow you to easily convert your XHTML compliant pages into pages that are not only accessible by web browser, but also by wireless devices, etc.

2. XHTML promotes clean code - which is helpful if you work in a development environment with other developers (In the short term, it may be quicker to just code it and forget it - but what about the future when the application may need to be updated to work with XML, not to mention respect for other developers who may have to edit the code in the future?).

It may take you a little bit of extra time to ensure your code is compliant, but think about the future time saved (not only regarding possibly having to rewrite the script - just consider the time saved in reading the code, since it will be much cleaner).

Also, you'll notice I changed the td tags above to use CSS style... this can be shortened even further when using CSS by defining a class... see http://www.w3schools.com/css for more info.

This kind of practice also leads to cleaner markup, and smaller document size, since you don't have to include <font></font> tags all over the place, which IMHO is really ugly.

3. Standards are a good thing... see #2!

Not to mention the fact that if more web developers promote standards by creating standards compliant pages, then browser makers will be more inclined to stick to the standards - which means less cross-browser incompatibility for you and me. And I'm sure everyone here has had their frustrations with the incompatibilities!

:D

[gcapp]

Ok, I get what you guys are talking about but when I added the code that Oracle guy sent, and what Whammy mentioned, the code looks like this now:

<tr>
<td width="61"><b><font face="Arial" size="1">*Email:</font></b></td>
<td width="389"><font face="Arial" size="2"><input type="text" name="required_email" value="<% Server.HTMLEncode(Request.Form("required_email"))%>
" size="30" /><b>(*must
be filled in!!)</b></font></td>
</tr>

and I also added the code that Whammy mentioned to the page:

Function NullToEmpty(str) ''''''''''''''''''''''''
If IsNull(str) Then str = ""
NullToEmpty = str
End Function ''''


The problem (from the users perspective) is that if i fill out the form and DONT fill in the email, the form just comes back to the page. The user wouldn't know if the form "took" or not.

Is there some kind of code that I can add that may generate a pop-up window or something saying "email address must be filled in!"?? Or something to let the user know that they have to fill in the email box?

[whammy]

<tr style="font-family: arial, helvetica; font-size: 12pt">
<td width="61"><b>*Email:</b></td>
<td width="389">
<input type="text" name="required_email"
value="<% Server.HTMLEncode(Request.Form("required_email")) %>"
size="30" />
<% If Request.Form("required_email") = "" Then Response.Write("<span style=""color: #ff0000""> *Please specify</span>") %>
</td>
</tr>


P.S. You shouldn't need the NullToEmpty function, since you aren't getting the info from a database.

[gcapp]

Whammy,
I hate to keep bothering you on this but it just doesn't do what I want. In fact here is the link:

NYS Contact (http://www.enchantedmountains.info/asp/nyscontact.asp)

When the page comes up, you will see in the form that the email has the Please Specify quote in red already there before anything has been filled in. So, from the users' perspective, I fill out the form and i don't put anything in the email box and the form reappears but how would the user know that the form didn't get sent? If the Please Specify is already there to start with and someone doesn't fill in the email and the Please Specify is still there after the form returns, how could you know?

Besides that, the Please Specify shouldn't be there to start with should it??

Isn't there some way of having the user know that the form didn't take??

Now obviously, if someone does fill in the email the Thank You page appears, but the person who doesn't realize that, I wouldn't want them to think the form worked if it really didn't.

Any answers??

Thanks

[whammy]

Yeah... you should check out my example form that does exactly what you are talking about... it's really short and to the point.

Pay special attention to the variable "Pass" - and the fact that the value of "Pass" is included in a hidden form field as well.... that's what determines whether to display an error or not:

http://www.solidscripts.com/ASP/email.txt

and you can see how it works on:

http://www.solidscripts.com/email.asp

If you really look at what I'm doing there, it should completely solve your problem. All you might need to add if pass > 1 is "Please complete/correct the fields in red below"... :D

[gcapp]

Whammy,
Well, I must be an idiot. I took the code from your example and put it in my page and when I don't type in an email, I get a response of "class="error", instead of the red Email like yours.

I looked at the code over and over and can't see why it's doing that.

If you want to see it live and what it's doing, click here:

NYS Contact (http://www.enchantedmountains.info/asp/nyscontact2.asp)

If you could just take a peak and see why, I would appreciate it.

Gary

[Thatguy2001au]

The easiest and best way to solve your problem is to include some javascript in your page which will pop up a box if the email field has not been filled out for has been filled out incorrectly and is not a valid email address. Include the following into your <head> section of your page:

<script Language="JavaScript">

function isEmailAddr(email)
{
var result = false;
var theStr = new String(email);
var index = theStr.indexOf("@");
if (index > 0)
{
var pindex = theStr.indexOf(".",index);
if ((pindex > index+1) && (theStr.length > pindex+1))
result = true;
}
return result;
}


function validEmail(formField,fieldLabel,required)
{
var result = true;

if (required && !validRequired(formField,fieldLabel))
result = false;

if (result && ((formField.value.length < 3) || !isEmailAddr(formField.value)) )
{
alert("Please enter a complete email address in the form: yourname@yourdomain.com");
formField.focus();
result = false;
}

return result;

}


function validateForm(theForm)
{
// Customize these calls for your form

// Start ------->

if (!validEmail(theForm.strrequired_email,"Email",true))
return false;


// <--------- End

return true;
}
</script>


Make sure that your form name is 'Form1'. Also, inside the <form> tag, insert this bit of code.

onsubmit="return validateForm(this)"

Once you do all that then you should be set. This example i have shown you should work for you provided your form name is Form1 and your email field name is strrequired_email

[whammy]

Javascript really should be avoided for validation when you can use server-side scripting to validate.

That way it works even if someone has javascript disabled.

P.S. That line should read
<td width="61"<% If Pass > 1 AND ValidEmail(Strrequired_email) = False Then Response.Write(" class=""error""") %<b>*Email:</b></td>

If you are going to use the class, then don't put font tags in there as they can override it.

Otherwise, just response.write whatever you want!!!!! You can put anything in there... but that's the basic idea...

[Thatguy2001au]

I guess you have a point there whammy.

[gcapp]

Thatguy:

I appreciate you giving me the code, but there is a problem. I put the code, just as you sent it to me, but the line :

onsubmit="return validateForm(this)" you said to put between the <form> tags, appears on my form.

If you want to check out my page and code here is the link:

NYS Contact (http://www.enchantedmountains.info/asp/nyscontact3.asp)

If you could help, I'd appreciate it.

Gary

[Thatguy2001au]

Sorry gary,

It has to go inside the <form> tag

<form onsubmit="return validateForm(this)"> along with the other stuff inside your form tag.

[whammy]

P.S. There's no reason NOT to use javascript to validate as well, as long as you also validate server-side. :)

[gcapp]

Thatguy,
Well I added all the code you sent and it doesn't work. I don't know why. If you could check it out for me, I would really appreciate it.

The link to view it is here:

NYS Contact (http://www.enchantedmountains.info/asp/nyscontact3.asp)

If you try it, you will see that the form returns but no message or anything.

I attached my page in case you want to look at it that way.

Thanks,
Gary

[whammy]

Ok... I looked over it again and tested it on my server...

First of all, you had TWO form tags... which totally disabled the javascript.

I replaced the javascript with something a little more robust and straightforward (that is all in one function instead of multiple functions, which is not only less confusing, it makes it easier to add other fields to validate).

Note that it uses the same regular expression as the VBScript email validation...

I also added an example of how you can show something different depending on if it validates or not server-side; but in order to test it you'll need to take out the

onsubmit="return validateForm(this)"

from the form tag temporarily, or disable javascript...

P.S. Please look over what I did very carefully, if you would like to validate more fields...

[Thatguy2001au]

Gary

Like whammy said, you have 2 <form> tags. One which reads like this :

<form method="post" id="form1" action="nyscontact3.asp">

And one which reads like this:

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

That is where your problem is. Rewrite it to look like this:

<form method="post" id="form1" onsubmit="return validateForm(this)" action="nyscontact3.asp">

Just use that to replace the 2 other form tags. You will also need to rename your email field name to:

strrequired_email

Once you have done those things then it should definately work.

[whammy]

I already did all that in the .zip I posted up there... I had noticed the misspelled field name as well.

Thatguy, you might want to look at the javascript function I put in there too... it's not any "better", it's just more straightforward (and only one function). :D

[gcapp]

Whammy,
Sorry to bother again on this form thing, but it still isn't working right. If you don't fill out the email, yes it prompts you to fill it in. However, after you fill it in and hit send, it brings you back to the form with the email still filled in.

You can't get the email to send

Somehow, I was hoping that it would take you to the contact-thanks.asp page at the bottom of the page code.

Can you help?

Here is the link:
NYS CONTACT (http://www.enchantedmountains.info/asp/nyscontact3.asp)

Thanks,
Gary

[whammy]

Oops, I forgot to take the check out that I put in LOL.

Here, try this... I took out the part where it said AND 1 = 2 ... of course had you gone through the code to see what I did, you might have noticed that. ;)

[gcapp]

Whammy,
Yes it works correctly now and I thank you very much. I did look at the code you put in on the last one, but since I'm new to asp, I didn't want to take anything out and screw it up.

Again thanks!!

[whammy]

Yay!