automatic form validation without submitting

[showman13]

I am trying to change my ways and wonder if someone could help me find my way... LOL

Honestly. I've always used forms in my scripts that a visitor had to submit, and it would reload the page and check the input and display any errors, etc...

What I would like is to be able to have a form simple first/ last/ phone/ email and submit button...

But I would like for the input to be validated as it is entered to ensure that they fill in all 4 fields, and that the phone number format and the email format are valid before they can even click on the submit button.

When they click the submit button, I need to redirect them to a different website, as well as record the info in a DB table, and send an email to the owner of the website that they are visiting.

I'm sure that is a way to accomplish this, but don't know where to start.

If there is a script plugin that I can just include into my php script or something along those lines it would be even better...

Thanks in advance for your feedback.

[hericles]

If you simply want to validate the input, make sure values are entered in required fields, that emails are in email format, etc you can just use jQuery to monitor each input for changes and validate them.
If you need to check the input against a database for any reason then you need AJAX to post the query away and get a response without leaving the page.
Both of those methods happen as the user enters data into the page and have nothing to do with the form submission (in fact, once anything is flagged as bad or a required field is incomplete you could disable the button).
Recording the info and sending an email would be handled by the PHP script on form submission.

I doubt you will find a custom script that works exactly as you want and PHP scripts won't work the way you want anyway as they require post back.

[DJBirdi]

Take a looksie at this: jQuery Validation Plugin

I've used it in the past and it sounds like it meets your needs. Plus it takes care of the smaller issues that sometimes get over-looked such as firing the focus event on any field that was not validated.

[diafol]

Just a quick one - break the problem down into its component parts. Client-side validation scripts can be found everywhere! You do not have to run JQuery or any other framework / lib for this, although they seem to be used for every little thing these days.

So:

1) Build your form
2) Find a js validation script - hericles' idea about enabling a send button is good - however remember to use server-side validation too as forms/headers can be spoofed or clever little client-side validations circumvented. You can check any input data via ajax (again as mentioend by Hericles), if required, however if it's 'insert' type data, that's probably not necessary, unless you want to check for possible duplicate records.
3) The submit should send your data to a form handling file (post method). I would suggest doing the DB write first before sending the email. If the db write fails, you don't want to send a forked-tongue email.
4) Only if the data passes server-side validation and there is a successful db write and sending of an email do you want to redirect (using header()).

[showman13]

Well, guess I took the easy way out. Went back to doing what I know with a couple variations, but basically SOS...

here is a sample of what I ended up with on the live site
http://cp13.24hed.com/admin

(But now I have another question, but it is a separate issue so will open a new topic for it.)

And the code I have in place to present it...

Started the page with this so it checks the data once posted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    if (empty($_POST["cfirst"])) {
        $firstErr = "Please Enter Your First Name";
    }
    else {
        $cfirst = $_POST["cfirst"];
    }

    if (empty($_POST["clast"])) {
        $lastErr = "Please Enter Your Last Name";
    }
    else {
        $clast = $_POST["clast"];
    }

    if (empty($_POST["cphone"])) {
        $phoneErr = "Phone Number is a Requested Entry.";
    }elseif(($_POST["cphone"] != preg_replace('~.*(\d{3})[^\d]*(\d{3})[^\d]*(\d{4}).*~', '$1-$2-$3', $_POST["cphone"])) || (strlen($_POST["cphone"]) != 12 )){
        $phoneErr = "Please use this format: 000-000-0000.";
    }else{
        $cphone = $_POST["cphone"];
    }

    if (empty($_POST["cemail"]))  {
        $emailErr = "Email is a Requested Entry";
    }elseif(!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", $_POST["cemail"])){
      $emailErr = "Please Enter a Valid Email Address.";
    }else{
        $cemail = $_POST["cemail"];
    }

}

then presented the form with the error displays embedded as needed.

<?php
  if ($_SERVER["REQUEST_METHOD"] != "POST") {
  print "<b><font color='#FFFFFF'>Take a LOOK INSIDE<br />for More Great Details.</font></b>";
  }
?>
            <form name="info" action="<?php print $_SERVER['PHP_SELF']; ?>" method="POST">

<b><font size="-1" color="#800000">First Name</font></b><br><input type="text" name="cfirst" value="<?php print htmlspecialchars($cfirst);?>">
<?php if ($firstErr){
  print '<b><font size="-2" color="#FF0000"><br />'.$firstErr.'</font></b>';
}?>

<br /><b><font size="-1" color="#800000">Last Name</font></b><br><input type="text" name="clast" value="<?php print htmlspecialchars($clast);?>">
<?php if ($lastErr){
  print '<b><font size="-2" color="#FF0000"><br />'.$lastErr.'</font></b>';
  }?>

<br /><b><font size="-1" color="#800000">Phone</font></b><br><input type="text" name="cphone" value="<?php print htmlspecialchars($cphone);?>">
<?php if ($phoneErr){
  print '<b><font size="-2" color="#FF0000"><br />'.$phoneErr.'</font></b>';
}?>

<br /><b><font size="-1" color="#800000">Email</font></b><br><input type="text" name="cemail" value="<?php print htmlspecialchars($cemail);?>" size="30">
<?php if ($emailErr){
  print '<b><font size="-2" color="#FF0000"><br />'.$emailErr.'</font></b>';
} ?>

<br />
<br>
<input type="submit" name="submit" value="Submit">


</form>
<?php
if ($cfirst == '' && $clast == '' && $cphone == '' && $cemail == ''){
  // no form filled out yet
}else if ($cfirst == '' || $clast == '' || $cphone == '' || $cemail == ''){
  print "Please Complete ALL Fields.";
}else{

  if ($firstErr == '' && $lastErr == '' && $addrErr == '' && $emailErr == ''){
    $created = date("Y-m-d H:i:s", time()) ;

....
(update DB and redirect visitor to website, etc...

[diafol]

I know this is solved Doug, but the mix of php and outdated html is a bit messy. Forget the font tag and all the attributes - use css.

'<b><font size="-2" color="#FF0000"><br />'.$emailErr.'</font></b>'

Why not go for something like...

<p class="errortext">...</p>

With css like...

.errortext{
    font-weight: bold;
    font-size: 0.8rem; //or whatever you need
    color: #FF0000;
}

The way yours is set up seems like a nightmare to maintain, if youd ecide to change say the colour or the size or boldness, or if you want to introduce a new style.

[showman13]

That actually makes a lot of sense, and it entered my mind, but I called myself being in a hurry and just getting it done. My guess is that I will go back and make those changes... especially now since someone else suggested it as well

Thank You.
Douglas