Topic awaiting preservation: php form validation?

Hi!

I hope you guys can help me again.
I'm using this php code to validate the form inputs:

<?php 
if (!preg_match("/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/", $epost)) {
  echo "<p>Ugyldig e-post adresse!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
} elseif ($navn == "") {
  echo "<p>Fyll ut navn!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}
elseif ($adresse == "") {
  echo "<p>Fyll ut Adresse!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}
elseif ($postnr == "") {
  echo "<p>Fyll ut postnummer!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}
elseif ($sted == "") {
  echo "<p>Fyll ut sted!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}
elseif ($epost == "") {
  echo "<p>Fyll ut e-post!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}
elseif ($tlf == "") {
  echo "<p>Fyll ut telefon nummer!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}

elseif ($tlf == "") {
  echo "<p>Fyll ut telefon nummer!</p>";
  echo "<a href='javascript:history.back(1);'>Tilbake</a>";
}



elseif (mail($to, $subject, $message, $headers)) {
  echo "<p>Takk $navn, skjemaet er sent! Vi tar kontakt så fort som mulig!</p>";
} else {
  echo "<p>Skjemaet ble ikke sent!</p>";
}

?>

Even if the user forgets to fill out name and addy, the form is still sent when the submit button is clicked! How can I avoid this?
I don't want the form sent until every field is filled out!

The PHP code is executed once the the page processing the form is loaded, that is when the FORM is submitted, so it's normal that the FORM is submit even though the fields do not match your conditions.

Why don't you check the fields in JavaScript by bypassing the onsubmit event of the FORM ? i.e. :

<form onsubmit="return checkForm( this );">
    <!-- your fields -->
</form>

<script type="text/javascript">

function checkForm( theForm )
{
    errorArray = []

    if( !theForm.elements['epost'].value.match( /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/ ) )
        errorArray[ errorArray.length ] = "email address invalid"
    if( theForm.elements['tlf'].value=="" )
        errorArray[ errorArray.length ] = "telephone number invalid"


    if( !errorArray.length )
        return true

    alert( "** Error **\n\n\t"+ errorArray.join( "\n\t" ) )
    return false
}

</script>

Well, something like that.
Hope that helps,

Better to have PHP spit out a "you're a dork, fill in all the fields" page, imo. JavaScript for forms...eww.

quote:

---

JavaScript for forms...eww.

---

Yeah I know but that's the only way to check the inputs without requesting another page.

I usually do both I just think it's a better user experience if you check with JS particularly if there are password fields involved. (I'll always forget one thing, get the next page and then forget to put the passwords again)



.:[ Never resist a perfect moment ]:.

I'll use JavaScript as well then. Thanks!

I will agree, do both. Javascript can make the experience for the user a whole lot easier, but you have to use the server to validate as well or else you will end up having problems that are far more malicious.

Dan @ Code Town

Can anyone explain how/why using javascript makes a better user experience?

I generally use PHP to do all the checking, and if someething was missed, simply spit the form back out with the fields filled in, and the filed that needs correcting/filling in highlighted.

I'm having a hard time seeing what Javascript could add to improve the user experience, generally speaking.

It really tends to depend on the form and the amount of validation needed. For a basic form with a couple of inputs and a textarea or two it's no big deal.

However for long complex forms with a lot of things you want to validate, the fewer trips to the server the better it tends to be for me. The password example above is one that always gets to me.

Granted you can and need to do all your validation twice with this method, however I tend to have a bunch of my validation routines both on the server and the client already existing in libraries so there's not generally a bunch of work required for me to get this to work.



.:[ Never resist a perfect moment ]:.

You can use your onchange to fire your validation, and then you can have the same type of warning highlight showup on your forms as the user is filling them out.

This allows the user the ability to immediately say "Oh, let me fix that." This takes less time and leads to less user frustration then having the to change gears to correct things.

When the press the submit button the user is hoping to get a result, but saying oh wait hold up you messed something up, you are screwing with the continuity.

Dan @ Code Town