Submit functionality using php to prevent submission upon invalid inputs - php

Question

I would like to validate a form on the server before submitting it to a database, i managed to write a php code that shows error messages for invalid inputs once the user clicks submit in the form, which is step one, however, step two is to prevent the form from submitting which is what i would like to know how , because despite error messages showing that input was invalid, the input goes to the data base. i tried to define a "$valid = true" variable , and then return it as false after each error message, but it didnt help ..
<?php
// define variables and set to empty values
$staffErr = $emailErr = $subjectErr = $problemErr = $descriptionErr= "";
$staffname = $email = $subject = $problem_type = $description = "";
$valid = true;
// staff name validation:
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["staffname"])) {
$staffErr = "Staff Name is required";
$valid = false;
} else {
$staff_name = test_input($_POST["staffname"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z-' ]*$/",$staffname)) {
$staffErr = "Only letters and white space allowed";
$valid = false;
}
}
// email validation:
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Please enter a valid email.";
}
}
// subject validation:
if (empty($_POST["subject"])) {
$subjectErr = "Subject is required";
} else {
$subject = test_input($_POST["subject"]);
// check if subject only contains letters and whitespace
if (!preg_match("/^[a-zA-Z-' ]*$/",$subject)) {
$nameErr = "Only letters and white space allowed";
}
}
// problem type validation:
if (empty($_POST["problem_type"])) {
$problemErr = "Problem type is required";
} else {
$problem_type = test_input($_POST["problem_type"]);
}
// description validation:
if (empty($_POST["description"])) {
$descriptionErr = "A Description is required";
} else {
$description = test_input($_POST["description"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<form method="post" onsubmit=" return formSubmit()" action="#">
<div class="error1" id= "errorMsg">* Required Fields</div>
<div class="error" id= "errorMsg1">*<?php echo $staffErr; ?></div>
<div>
<label for="staff_name"><b>Staff Name:</b></label>
<input class="field" id="staff_name" name="staffname" onclick=" return staffValidation()" onchange=" return staffValidation()" id="subject" type="text" placeholder="Staff Name" >
</div><br>
<div class="error" id= "errorMsg2">*<?php echo $emailErr; ?></div>
<div>
<label for="email"><b>Email:</b></label>
<input class="field" id="email1" name="email" onclick=" return emailValidation()" onchange=" return emailValidation()" type="email" placeholder="staff#wearview.com" >
</div><br>
<div class="error" id= "errorMsg3">*<?php echo $subjectErr; ?></div>
<div>
<label for="subject"><b>Subject:</b></label>
<input class="field" name="subject" id="subject1" onclick=" return subjectValidation()" onchange=" return subjectValidation()" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg4">*<?php echo $problemErr; ?></div>
<div>
<select onclick=" return problemValidation()" onchange=" return problemValidation()" class="field4" name="problem_type" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Software&Hardware">Software & Hardware</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg5">*<?php echo $descriptionErr; ?></div>
<div>
<textarea class="field2" id="description1" name="description" onclick=" return descriptionValidation()" onchange=" return descriptionValidation()" placeholder="Description goes here" rows="15" cols="90"></textarea>
</div>
<div>
<button class="field3" type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>

Answer 1

Here's an example (all PHP) without Javascript but with better security & email check. Tested on a working server. If you want an example with a properly protected insert statement, let me know and I'll add to this answer.
<?php
$name = $response_name = $email = $response_email = ""; // Clear variables
// Name (trims white space and doesn't accept names under 2 characters or over 20 characters)
if (isset($_POST['myform'])) {
$name = mysqli_real_escape_string($con, $_POST['name']);
if (empty($name) || strlen(trim($name)) < 2 || strlen(trim($name)) > 20) {
$response_name = "bad name";
}
// Email (checks for correct email format and tests a response from the email domain server example: gmail.com)
$email = mysqli_real_escape_string($con, $_POST['email']);
$email_host = strtolower(substr(strrchr($email, "#"), 1));
$email_host = idn_to_ascii($email_host.'.');
if (filter_var($email, FILTER_VALIDATE_EMAIL) === false || !checkdnsrr($email_host, "MX")) {
$response_email = "bad email";
}
if ($response_name=="" && $response_email=="") {
echo "data ok, proceed";
// Now send to MySQL table...
}
}
echo "
<form method='post'>
<label for='name'><b>Name:</b> $response_name</label>
<input name='name' type='text' value='$name' placeholder='Enter your name'>
<label for='email'><b>Email:</b> $response_email</label>
<input name='email' type='email' value='$email' placeholder='Enter your email' >
<button type='submit' name='myform'>SUBMIT</button>
</form>
";
?>
Note: For forms, Javascript is good for initial data error detection but to be really secure you would want to check with PHP and so if you're already using Javascript for forms you should be using AJAX as it's much more user friendly (no page reloading required) and you'll be able to reference an external PHP file which keeps code neater and tidier, at least IMO!