Form validation

[Cainnech]

Hi guys,

I'm having difficulties with a form I want to validate.
Below I have pasted an excerpt of my code but my problem lies here:

if VNom = "" or VEmail = "" or VComment = "" then
response.redirect("react.asp")
end if
 

Now this code works without any problem. The only thing is I don't want him to reload the page when a field hasn't been filled in but I want to have a messagebox popping up stating that they haven't filled in that field.

This way I prevent users from retyping everything they already typed before trying to send the form.

Now I tried a few options already where I use a piece of javascript to have an alert popup but when I test it, it still opens a new page.

So I'm completely blocked.
Please note that I'm novice to ASP so this is code that I copied from here and there so it might not be "real asp".

Below is the Send part of the code.
Thanks for your help.

if action = "Send" then
 
login = request.form("login")
VNom = escstring(request.form("nom"),"'")
VEmail = escstring(request.form("email"),"'")
VComment = escstring(request.form("msgText"),"'")
 
    if VNom = "" or VEmail = "" or VComment = "" then
    response.redirect("react.asp")
    end if
 
Ye = datepart("yyyy",now())
Mm = datepart("m",now())
if Mm < 10 then
M = "0" & Mm
else
M = Mm
end if
 
Dd = datepart("d",now())
if Dd < 10 then
D = "0" & Dd
else
D = Dd
end if
 
SQLQuery= "INSERT INTO Table1 (login, nom, email, comment, jour, mois, annee) VALUES( '" &login& "','" &VNom& "','" &VEmail& "','" &VComment& "','" &D& "','" &M& "','" &Ye& "')"
OBJdbConnection.Execute SQLQuery
 
response.redirect("react.asp")
 

[jhardman]

Your javascript approach is on the right track. What you need to change is remove the form submitting behavior - nothing the user can do should be able to post the form. Instead, the button he clicks should validate via javascript, then submit IF it validates. Does this make sense?

Jared

[Cainnech]

Hi Jared,

It absolutely makes sense. I have tried this actually. The problem is that in order to submit I have to assign an action to it as well.

So when I press the submit-button appearantly the buttons sends an action along which I can't simulate.

<input type="submit" name="action" class="button" value="Send">
 

This is the code for the submitbutton.

The name="action" is of importance and also the value="Send" also. Because it is that value that causes the input to be posted.

if action = "Send" then 
 

So in javascript I can post a form by means of document.form.submit() but here I don't have a clue how I can take that action along.

The action in the form is set now to react.asp

<form action="react.asp" method="post" name="reactform">
 

So what I also already tested was to change the action to react.asp?action=Send but without any luck unfortunately.

[jhardman]

Let me ask a javascript expert to weigh in, but here is a simple work-around:

Do not provide a submit button in the form, instead add a button below the form that calls the validate function and then submits the form. The downside of this approach is you can't just hit 'enter' to submit, but this approach is often used. Another approach is to disable the submit button at first and validate after each input loses focus. When the form validates you just need to enable the submit button.

You could also take a pure ASP approach and submit to the same page. If any of the form variables are blank you show the form (but use any submitted values to fill the form as much as possible - see code below). That way, on the first time through the user sees the form (because obviously there is no form data supplied) but if he submits without completing the form, he sees the form again partially filled out. If he submits it finished, handle the data and redirect.

Jared

[Cainnech]

Hey Jared,
I never thought of the disable function actually but it´s a good idea.
I'll look into it.

[acoder]

One simple way to validate forms using JavaScript is to use the onsubmit event:

<form action="react.asp" method="post" name="reactform" onsubmit="return validate()">

then in the validate() function, return true or false:

function validate() {
  if (condition not met) {
    alert(...);
    field.focus();
    return false;
  } else ...
  // and so on...
  // finally, if validation passes
  return true;
}

[jhardman]

I've moved this thread to the javascript forum since it appears the solution you are pursuing is a javascript sol'n. Let me know if this is OK.

Jared

[Cainnech]

Hey Jared, the move is ok.

Acoder, a big thanks to you because this did the trick.
Fantastic!

Thanks mate!

[acoder]

You're welcome! Just a word of warning though: do not depend on JavaScript validation. It's there as a convenience. The real validation should still take place on the server-side (ASP code).