Validating a form with JS turned off

[wuzhannanan]

Right now, my form uses a JavaScript file to validate responses. I am trying to prevent a form from being submitted when JavaScript is turned off. Thus, I want to create some simple logic in ASP that tells the user to enter their name when "Your Name" is given as a value (Note: by default, I have "Your Name" set as the value). Here is what my form looks like:

<script language="JavaScript" src="form_check.js" type="text/javascript"></script>
<form class="fpq" action="price_quote.asp" method="POST" id="quotesform1" name="quotesform1" onSubmit="return checkquotevalues();">
<input name="ReferralCode" type="hidden">

<input type="text" name="NumberOfEmployees" id="NumberOfEmployees" value="# of Employees" tabindex="1" onfocus="if(this.value == '# of Employees') {this.value = '';}" onblur="if (this.value == '') {this.value = '# of Employees';}" /><br />
<select name="PayrollFrequency" tabindex="2" />
<option value='0'>Select one</option>
<option value="W">Weekly</option>
<option value="BW">Bi-Weekly</option>
<option value="S">Semi-Monthly</option>
<option value="M">Monthly</option>
</select><br />
<input type="text" name="YourName" id="YourName" value="Your Name" tabindex="3" onfocus="if(this.value == 'Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Name';}" /><br />
<input type="text" name="Email" id="Email" value="Email" tabindex="4" onfocus="if(this.value == 'Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email';}" /><br />
<input type="text" name="PhoneNumber" id="PhoneNumber" value="Phone" tabindex="5" maxlength="14" onfocus="if(this.value == 'Phone') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Phone';}" />

<input type="image" src="show-me.gif" alt="Show Me a Price Quote" id="Image1" name="submit2" tabindex="8" />

<input type="hidden" name="ContactRegarding" value="Q">
<input type="hidden" name="SaveData" value="True">
<input type="hidden" name="ReferralCode" value="<% =fm_refcode%>">
<input type="hidden" name="UserType" value="<% =Request.Cookies("sMsource")%>" />
<input type="hidden" name="EmployeeType" value="<% =Request.Cookies("sMkeyword")%>" />

</form>

Can someone point me in the right direction of how to create this logic? Where would it go in the code? Thanks in advance for any help you can offer.

[Old Pedant]

Two choices:
(1) Add code to price_quote.asp that does the form validation.

(2) Change the code to post back to *this same page*, add the ASP-based validation here, and then only if the validation succeeds do a Server.Transfer "price_quote.asp"

In any case you should *NEVER* rely upon JavaScript validation. If the user turns off JavaScript, or if a hacker spoofs your page without even using your <form>, you have no protection.

There are tons of sites and pages that discuss ASP-based validation, so I'm not going to give you specific advice until/unless you ask for it.

[wuzhannanan]

Two choices:
(1) Add code to price_quote.asp that does the form validation.

(2) Change the code to post back to *this same page*, add the ASP-based validation here, and then only if the validation succeeds do a Server.Transfer "price_quote.asp"

In any case you should *NEVER* rely upon JavaScript validation. If the user turns off JavaScript, or if a hacker spoofs your page without even using your <form>, you have no protection.

There are tons of sites and pages that discuss ASP-based validation, so I'm not going to give you specific advice until/unless you ask for it.

I would like to go with option #2 since I only want valid leads to go to price_quote.asp. What code needs to be changed?

[Old Pedant]

Ummm...not changed. Written. There's nothing at all in the code you show that would do or assist in server-side validation.

By the way, how come you have
<input name="ReferralCode" type="hidden">
*twice*??? Once without a value and once with?

But I don't think you are showing all the code, because you have this line:

<input type="hidden" name="ReferralCode" value="<% =fm_refcode%>">
but nowhere in the stuff you show is the variable fm_refcode initialized.

[wuzhannanan]

Ummm...not changed. Written. There's nothing at all in the code you show that would do or assist in server-side validation.

By the way, how come you have
<input name="ReferralCode" type="hidden">
*twice*??? Once without a value and once with?

But I don't think you are showing all the code, because you have this line:

<input type="hidden" name="ReferralCode" value="<% =fm_refcode%>">
but nowhere in the stuff you show is the variable fm_refcode initialized.

I'm sorry, you wrote that I need to change the code to post back to this same page, which is why I asked what code needs to be changed. You're right, that ReferralCode is duplicated so I removed the last instance.

Can you help me out with the server side validation? What steps need to be taken to accomplish this?

[Old Pedant]

*sigh* okay, I give up. I *really* wanted to see your REAL code, because clearly you are *NOT* showing *ALL* the code.

But here's my attempt.

<script language="JavaScript" src="form_check.js" type="text/javascript"></script>
<%
If Request("POSTBACK") = "YES" Then
oops = ""

On Error Resume Next
numEmp = 0
numEmp = CLng( Request("NumberOfEmployees") )
On Error GoTo 0
If numEmp <= 0 OR numEmp > 99999 Then
oops = oops & "<li>Please enter a valid number of employees</li>"
End If

payFreq = Request("PayrollFrequency")
If InStr(":W:BW:S:M:",":" & payFreq & ":") = 0 Then
oops = oops & "<li>You must select your payroll frequency</li>"
End If

name = Replace( Request("YourName"), " ", "" )
If Len(name) < 4 Then
oops = oops & "<li>Please give us your name so we can contact you</li>"
End If

Set emre = New RegExp
emre.Pattern = "^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$"
emre.IgnoreCase = True
If Not emre.Test( Request("Email") ) Then
oops = oops & "<li>Please enter a valid email address</li>"
End If

Set phre = New RegExp
phre.Pattern = "[^\d]"
phre.Global = True
phone = phre.Replace( Trim(Request("PhoneNumber")), "" )
If Len(phone) <> 10 Then
oops = oops & "<li>Please give us your 10 digit phone number</li>"
End If

' check for the hidden fields still present:
If Trim(Request("ContactRegarding")) <> "Q" OR Trim(Request("SaveData")) <> "True" Then
oops = oops & "<li>The form you have submitted is invalid; please try again</li>"
End If

If oops = "" Then
Server.Transfer "price_quote.asp"
End If
Response.Write "Please correct the following errors and submit the form again:<ul>" & oops & "</ul><hr>"
End If
%>
<form class="fpq" method="POST" id="quotesform1" name="quotesform1" onSubmit="return checkquotevalues();">
<input name="POSTBACK" type="hidden" value="YES">

<input type="text" name="NumberOfEmployees" id="NumberOfEmployees" value="# of Employees" tabindex="1" onfocus="if(this.value == '# of Employees') {this.value = '';}" onblur="if (this.value == '') {this.value = '# of Employees';}" /><br />
<select name="PayrollFrequency" tabindex="2" />
<option value='0'>Select one</option>
<option value="W">Weekly</option>
<option value="BW">Bi-Weekly</option>
<option value="S">Semi-Monthly</option>
<option value="M">Monthly</option>
</select><br />
<input type="text" name="YourName" id="YourName" value="Your Name" tabindex="3" onfocus="if(this.value == 'Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Name';}" /><br />
<input type="text" name="Email" id="Email" value="Email" tabindex="4" onfocus="if(this.value == 'Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email';}" /><br />
<input type="text" name="PhoneNumber" id="PhoneNumber" value="Phone" tabindex="5" maxlength="14" onfocus="if(this.value == 'Phone') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Phone';}" />

<input type="image" src="show-me.gif" alt="Show Me a Price Quote" id="Image1" name="submit2" tabindex="8" />

<input type="hidden" name="ContactRegarding" value="Q">
<input type="hidden" name="SaveData" value="True">
<input type="hidden" name="ReferralCode" value="<% =fm_refcode%>">
<input type="hidden" name="UserType" value="<% =Request.Cookies("sMsource")%>" />
<input type="hidden" name="EmployeeType" value="<% =Request.Cookies("sMkeyword")%>" />

</form>

Note that I *removed* the action= from the <form>, so that the form will post back to this same page.

The added hidden field named "POSTBACK" is how I make sure the validation isn't performed too early.

THIS CODE IS NOT TESTED!!!!

It's very similar to code I have used in the past, but it has not been carefully tested. Use it at your own risk. Tell me if you encounter errors.

**************

EDIT: I added email validation in magenta. I used the same regular expression that your JavaScript code was using, so it should give the same results. It's not the one I would normally use, but I figured you would want them to match.

[wuzhannanan]

Thanks, I added that code to my page and got this result when I hit submit with JS turned off:


Microsoft VBScript runtime error '800a01f4'

Variable is undefined: 'numEmp'

/Include/960/forms/inc_lt_quote-form.asp, line 15


Is something off there?

Also, once the user hits submit on the form, I need them to go to the next page ("price_quote.asp") because that generates a price quote based on the info they submitted. With that being said, is it still OK to remove the action= from the <form>?

[Old Pedant]

Well, I told you I needed to see the whole page's code.

Your page apparently has done <% option explicit %> and so requires that each variable be defined before it is used.

Easy to fix:

<%
If Request("POSTBACK") = "YES" Then
Dim oops, numEmp, payFreq, name, emre, phre, phone
... rest same ...


************

I need them to go to the next page ("price_quote.asp") ...

Yes? Did you not notice this line in the code?
Server.Transfer "price_quote.asp"


If you leave in the action=, then the form *WILL* go DIRECTLY to price_quote.asp and my added code will never be used.

[wuzhannanan]

Now I get this error message:

Microsoft VBScript compilation error '800a0411'

Name redefined

/Include/960/forms/inc_lt_quote-form.asp, line 9

Dim oops, numEmp, payFreq, name, emre, phre, phone
----^

I'm sending over the full code from the page.

[Old Pedant]

That error message makes no sense.

Look at it:

/Include/960/forms/inc_lt_quote-form.asp, line 9

In the source code you showed me, line 9 is
function GetErrorInfo (error_status, error_date, rs)

and the line where the error *supposedly* is

Dim oops, numEmp, payFreq, name, emre, phre, phone

is actually somewhere around line 650 or so.

So, pardon me, but I don't think you are showing me the right code, at all.

Also, that says that the problem is in a file that I *THINK* is a #include'd file, and the source code you showed does not have any #include's in it.

[wuzhannanan]

Hi, I recently tried this code again, played around with it and it seems to work well. So first and foremost, thank you Old Pendant.

Now, when the user doesn't enter information in one of the fields, the form gets moved down and the <li> populates within the code. Is there anyway to make a pop-up window appear, similar to how it does in JavaScript? Or is the only way to display an error message by displaying it on the actual page, in this case in the list-item format?

Again, thanks for your help!

[Old Pedant]

The only way to make a popup appear is to use JavaScript.

So yes, we could display a popup in place of the inline error message. But only if the user has JS enabled. But if he/she has JS enabled, then presumably he/she would get the JS-based validation messages in the first place and won't then need the popup error message.

So, personally, I'd leave this alone. Hopefully, the only people who *NEED* the ASP-based validation will see ugly validation, but they should be few and far between.

[Old Pedant]

(Strictly speaking, we *could* have a pop-ON appear without using JavaScript code, but then the only way to make it go away is to use JavaScript, so...)

[wuzhannanan]

I gotcha Old Pendent, that makes sense. Now, I have one final question...

For the YourName field, I have the value set at "Your Name". I want to kick back users who A) ignore this field and keep the "Your Name" value, and B) enter any number, anywhere in the field (ex. "John 0 Appleseed" or "12").

I've been looking online but can't find something that works for the number issue.

[Old Pedant]

Are you talking about the JS code or the ASP/VBS code?

Though I guess the answer is nearly the same.


VBS:

name = Trim(Request("YourName"))
Set nmre = New RegExp
nmre.Pattern = "^[a-zA-Z\'\-]+\s[a-zA-Z\'\-]{3,99}$"
If name = "Your Name" Or Not nmre.Test(name) Then
oops = oops & "<li>Please enter your first and last name</li>"
End If

JS:

var name = form.YourName.value.replace(/^\s+/,"").replace(/\s+$/,"");
var nmre = /^[a-zA-Z\'\-]+\s[a-zA-Z\'\-]{3,99}$/ ;
if ( name == "Your Name" || ! nmre.test(name) )
{
alert("Please enter your first and last name");
return false;
}


Or something along those lines.

I allow ' and - in the names, to handle "O'Brien" and "Jones-Slattery", just for example.

[wuzhannanan]

Excellent. That worked. Thank you sir.

[wuzhannanan]

Ah, wait I found a bug. I changed some of the code to work and have it set like this:


<%
If Request("POSTBACK") = "YES" Then
Dim oops, numEmp, payFreq, name, emre, phre, nmre, fhone
oops = ""

On Error Resume Next
numEmp = 0
numEmp = CLng( Request("NumberOfEmployees") )
On Error GoTo 0
If numEmp <= 0 OR numEmp > 99999 Then
oops = oops & "<li>Please enter a valid number of employees</li>"
End If

name = Trim(Request("YourName"))
Set nmre = New RegExp
nmre.Pattern = "^[a-zA-Z\'\-]+\s[a-zA-Z\'\-]{3,99}$"
If name = "Your Name" Or Not nmre.Test(name) Then
oops = oops & "<li>Please enter your name</li>"
End If

payFreq = Request("PayrollFrequency")
If InStr(":W:BW:S:M:",":" & payFreq & ":") = 0 Then
oops = oops & "<li>You must select your payroll frequency</li>"
End If

Set emre = New RegExp
emre.Pattern = "^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$"
emre.IgnoreCase = True
If Not emre.Test( Request("Email") ) Then
oops = oops & "<li>Please enter a valid email address</li>"
End If

Set phre = New RegExp
phre.Pattern = "[^\d]"
phre.Global = True
fhone = phre.Replace( Trim(Request("PhoneNumber")), "" )
If Len(fhone) <> 10 Then
oops = oops & "<li>Please give us your 10 digit phone number</li>"
End If

' check for the hidden fields still present:
If Trim(Request("ContactRegarding")) <> "Q" OR Trim(Request("SaveData")) <> "True" Then
oops = oops & "<li>The form you have submitted is invalid; please try again</li>"
End If

If oops = "" Then
Server.Transfer "/quote/instant_price_quote.asp"
End If
Response.Write "Please correct the following errors and submit the form again:<ul>" & oops & "</ul>"
End If
%>


But now, when I have JavaScript turned ON, and enter in all the information, I still get an error that dropdown like the ASP errors, and says

"Please correct the following errors and submit the form again:

* Please enter your name"

I can't figure out what's causing this error.

[Old Pedant]

JavaScript being on or off would have ZERO impact on the ASP code.

I don't understand if you are saying you get that error message from the ASP code or from the JS code.

[wuzhannanan]

I am getting the error message from the ASP code. But this happens when my JS is turned on.

[Old Pedant]

Then there is something wrong in the JS code.

If I were *GUESSING* I'd bet there's a place in the JS code that is doing

if ( form.YourName.value = "" )

when the = there needs to be ==

But I can't tell without seeing all the JS code.