PHP表单验证警报，无需重定向页面

Question

Basically whats happening is I have a php form to send an email. There are several different validation steps all along the way, which all work great. What i'd like to do is have a javascript alert pop up if there is a validation error when the form is submitted. I have this working with the following php:

// Validate email
if(!filter_var($EmailFrom, FILTER_VALIDATE_EMAIL))
{
  echo "<script language=javascript>alert('Please Use a Valid Email Address')</script>";
  exit;
}

The alert pops up but the page redirects to domain.com/sendemail.php which leaves the user with a blank page. I'd really like to have the alerts pop up without reloading the page. How would I do this?

Answer 1

This is a script I used in some forms I created to validate them fast. It's very simple and effective, I hope it helps you.

<script type="text/javascript">
function validate(){ 
    emailfilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    condition = 1;
    mensaje = "Complete: ";
    //Validate 1st input (Check if empty)
    if (document.formname.forminput1.value.length==0){ 
         condition = 0;
         msg = msg + "-Input 1 is empty "
    }
        //Validate 1nd input (Check email)
    if (!emailfilter.test(document.formname.forminput1.value)) {
         condition = 0;
         msg = msg + "-Input 1 has a invalid email adresss "
    }

    if (condition == 0){ 
         alert(msg) 
         document.formname.forminput1.focus() 
         return 0; 
    }

    //send
    alert("Form sended."); 
    document.formname.submit(); 
} 
</script>

Answer 2

You can use ajax to accomplish this. But if you don't want to use ajax, instead doing an exit on error, you could redirect back to the form page along with a query string parameter.

header("Location: http://www.example.com/form.php?error=1");

And on your form page you could put the script withing php if. Something like

<?php if(isset($_GET['error']) && $_GET['error']==1): ?>
<script>
....
</script>
<?php endif; ?>

That would achieve what you are looking for. In fact you can perform multiple checks and set error based on your checks. But I would still suggest Ajax will give a better user experience.

Answer 3

Edit: Super easy solution, use jQuery form plugin : http://jquery.malsup.com/form/

I do something similar in some of my web apps, you might find it useful.

I do my validation server side and if I encounter an error I do this :

json_die(array(
  'status' => 'error',
  'message'=> 'Your error message'
));

and for success :

json_die(array(
  'status' => 'success',
  'message'=> 'Your success message'
));

The json_die is function is :

function json_die($array) {
        header("content-type: application/json");
        die(json_encode($array, true));
}

Then on the front end I do something like this:

  $.post('/your_url', {
                        'your': vars

                    }, function (r) {

                      if(r.status == 'success') {

                           alert(r.message);

                        } else if (r.status == 'error') {

                            alert(r.message);
                             //handle error

                        } else {
                           alert('server exploded / no connection');
                         }

                    },'json');