You are correct that server side validation is the only required one, however there is a lot of value having JS validation too. Probably 90% or more of your users will have JS enabled. They will get much faster responses (no waiting for the page to reload) and therefore have a better user experience.
The client (JS) and server (PHP) side validation run completely separately from one another. In your example your onsubmit handler would actually cancel the form submission if any errors are found. This means that the server doesn't receive the posted form if there were errors that JS caught. If JS doesn't stop the form submission the data will be posted to your action script and PHP can do it's thing.
JS validation can also run before the submission. For example JS will often listen to the blur event of particular form fields and validate them individually after the user has moved off them. Onsubmit checking is still useful to check fields that were never focused, and to check relationships between fields (if one depends on the other).
Using both together is not any harder than using one or the other individually. First get your PHP validation happening. It should provide specific reasons the submission was rejected, and also repopulate the form fields with what the user entered, so they don't have to redo the whole thing. Once you have that working you can your JS validation on top.
Here is a simplified example of server side validation, where the form is repopulated. If your comfortable with OOP I'd recommend that instead of procedural code like this:
PHP Code:
<?php
//Default form values
$name = '';
$country = 'new zealand';
$phone = '';
/* Process form submission
--------------------------- */
if(isset($_POST['name'])) {
$error_msg = array();
//Name
$name = trim($_POST['name']);
if(strlen($name) < 6) {
$error_msg[] = 'Full name is required';
}
//Country
$country = trim(strtolower($_POST['country']));
if(!in_array($country, array('australia', 'new zealand', 'france', 'turkey'))) {
$error_msg[] = 'Sorry, we only ship to Australia, New Zealand, France and Turkey';
}
//Phone
$phone = trim($_POST['phone']);
if(!preg_match('/^[0-9]{10,15}$/', $phone)) {
$error_msg[] = 'Phone number must be numbers only, between 10 and 15 digits';
}
//No errors - process the form
if(!$error_msg)) {
//do stuff here
//display success messsage
}
}
/* Display errors, capture input for form
----------------------------------------- */
if(isset($error_msg[0])) {
//Display specific errors to user
$errors = "<p>The following errors occurred:</p>";
$errors .= "<ul>";
foreach($error_msg as $e) {
$errors .= "<li>$e</li>";
}
echo $errors . "</ul>";
//Escape user input to be put back
//into the HTML to repopulate form
$name = htmlspecialchars($name, ENT_QUOTES);
$country = htmlspecialchars($country, ENT_QUOTES);
$phone = htmlspecialchars($phone, ENT_QUOTES);
}
?>
<form method="post" action="this-script.php">
Name <input type="text" name="name" value="<?php echo $name;?>">
Country <input type="text" name="name" value="<?php echo $country;?>">
Phone <input type="text" name="name" value="<?php echo $phone;?>" maxlength="15">
<input type="submit" name="orderBtn" value="Order Now">
</form>
Questioning JS and PHP form validation
Bookmarks