使用Javascript / PHP进行HTML表单验证

Question

I have set up a basic contact form which emails the form data via PHP. This works fine but I am having trouble intregrating validation script into the code to prevent the form from submitting when no data is entered.

My code so far is:

PHP to Email the data:

<?php  
//validate 
if(isset($_POST['submit']))
{
$to="[e-mail]";
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$subject="Contact Us";
$body="Name: $name 

 Email Address: $email 

";
$sent=mail($to, $subject, $body);
echo 'Sent'; die;  
} 
// 
?>

JS to post the form:

$(document).ready(function() {
$("#form1").validate({
    submitHandler: function() {
        //submit the form
$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post
            $("#form1").serialize(), 
            function(data){
              //if message is sent
              if (data == 'Sent') {
                $("#message").fadeIn(); //show confirmation message

            }
            //
        });
        return false; //don't let the page refresh on submit.
    }
}); //validate the form
});

HTML Form

<div id="contact-form">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 

<input type="text" id="name" name="name"/>
<input type="text" id="email" name="email"/>  
<input name="submit" type="submit" title="Submit" class="submit_go" value="Submit"/>

</form>
<div id="message">Thank you for your message</div>
</div>

I have tried integrating the below validation script but this doesn't prevent the form from submitting?

Validation Script

 function leftValue(e, t, n) {
$(this).text(t.parent()[0].style.left)
}
$(document).ready(function() {
required = ["name", "email"];
email = $("#email");
errornotice = $("#error");
emptyerror = "Required Field";
emailerror = "Required Field";
$("#form1").submit(function() {
    for (i = 0; i < required.length; i++) {
        var e = $("#" + required[i]);
        if (e.val() == "" || e.val() == emptyerror) {
            e.addClass("form-error");
            e.val(emptyerror);
            errornotice.fadeIn(750)
        } else {
            e.removeClass("form-error")
        }
    }
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-  Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("form-error");
        email.val(emailerror)
    }
    if ($(":input").hasClass("form-error")) {
        return false
    } else {
        errornotice.hide();
        return true
    }
});
$(":input").focus(function() {
    if ($(this).hasClass("form-error")) {
        $(this).val("");
        $(this).removeClass("form-error")
    }
})
});

Answer 1

Aside of your validation in the client you really have to do the validation on the server side all over (in PHP). There is NO guarantee whatsoever that the client side validation happens (users might even have disabled javascript completely), nor that the input comes from your page at all.

Client side validation: eye-candy for the user

Server side validation: where the real security and protection happens.

FWIW: html5 allows for client side validation by the browser.

<form [...]> 
  <input type="text" id="name" name="name" required="required" placeholder="Name" minlength="2" />
  <input type="email" id="email" name="email" required="required" placeholder="Email" />  
  <input name="submit" type="submit" title="Submit" class="submit_go" value="Submit" />
</form>

More info:

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
• https://html.spec.whatwg.org/multipage/forms.html