<!-- Stylesheets -->
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Web Form Design and Development
Lesson 8: Server-side validation (the classic method)
<div class="demo-lesson-nav">
<a href="lesson7.html" class="demo-lesson-nav-prev">← Previous Lesson</a>
<a href="lesson9.html" class="demo-lesson-nav-next">Next Lesson →</a>
</div> <!-- end demo-lesson-nav -->
<div class="demo-container">
<form action="scripts/lesson 8/validate.php" method="POST" id="form-new-account" novalidate>
<fieldset>
<legend>Create a New Account</legend>
<p>
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g. John Smith, must be between 3 and 25 characters, letters and spaces only</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="username">Username:</label><br />
<input type="text" name="username" id="username" maxlength="15" class="validate-locally" />
<span class="demo-input-info">E.g. johnsmith, must be between 3 and 15 alphanumeric characters</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="username">Gender:</label><br />
<select name="gender" id="gender">
<option value="0">- Select a Value -</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<span class="demo-errors"></span>
</p>
<p>
<label for="email">Email Address:</label><br />
<input type="email" name="email" id="email" class="validate-locally" />
<span class="demo-input-info">E.g. [email protected]</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="password">Password:</label><br />
<input type="password" name="password" id="password" class="validate-locally" />
<span class="demo-input-info">Must be 6 characters minimum, alphanumeric</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="confirm-password">Confirm Password:</label><br />
<input type="password" name="confirm-password" id="confirm-password" class="validate-locally" />
<span class="demo-errors"></span>
</p>
<p>
<input type="checkbox" id="subscribe" name="subscribe" />
<label for="subscribe">Subscribe to newsletter</label>
</p>
<p>
<input type="submit" value="Create Account" name="submit" />
</p>
<p><small><em>Note: All fields are required!</em></small></p>
</fieldset>
</form>
</div> <!-- end demo-container -->
<footer class="demo-footer">
<p><small>a <a href="https://tutsplus.com/">Tuts+</a> course by Adi Purdila</small></p>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="scripts/lesson 8/validate.js"></script>
[php]
<?php /***********************************************************************************************/ /* If nothing is posted then we exit */ /***********************************************************************************************/ if (!$_POST) { die("This file cannot be accessed directly!"); } /***********************************************************************************************/ /* Define regular expression patterns */ /***********************************************************************************************/ $expEmail = '/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/'; $expLettersOnly = '/^[a-zA-Z ]+$/'; $expLettersNumbers = '/^[a-zA-Z0-9]*$/'; /***********************************************************************************************/ /* Define the function for checking the field length */ /***********************************************************************************************/ function validateLength($fieldValue, $minLength) { return (strlen(trim($fieldValue)) > $minLength); } /***********************************************************************************************/ /* Get the posted field values and validate each field */ /***********************************************************************************************/ $name = $_POST["name"]; $username = $_POST["username"]; $gender = $_POST["gender"]; $email = $_POST["email"]; $password = $_POST["password"]; $confirmPassword = $_POST["confirm-password"]; $subscribe = $_POST["subscribe"]; $errorExists = false; $errors = "Errors:- ";
// Name
if (!validateLength($name, 2)) {
$errorExists = true;
$errors .= "
- The name is too short! "; } if (preg_match($expLettersOnly, $name) !== 1) { $errorExists = true; $errors .= "
- The name can only contain letters and spaces! "; } // Username if (!validateLength($username, 2)) { $errorExists = true; $errors .= "
- The username is too short! "; } if (preg_match($expLettersNumbers, $username) !== 1) { $errorExists = true; $errors .= "
- The username can only contain alphanumeric characters! "; } // Gender if ($gender === "1") { $gender = "Male"; } else if ($gender === "2") { $gender = "Female"; } else { $errorExists = true; $errors .= "
- Please select a gender! "; } // Email if (preg_match($expEmail, $email) !== 1) { $errorExists = true; $errors .= "
- The email address format is invalid! "; } // Password if (!validateLength($password, 5)) { $errorExists = true; $errors .= "
- The password is too short! "; } if (preg_match($expLettersNumbers, $password) !== 1) { $errorExists = true; $errors .= "
- The password can only contain alphanumeric characters! "; } // Confirm Password if ($confirmPassword !== $password) { $errorExists = true; $errors .= "
- The passwords don't match! "; } if ($subscribe === on) { $subscribe = "checked"; }else if ($subscribe === off) { $subscribe = "Not subscribed!"; $errorExists = true; $errors .= "
- Hopefully you might subscribe later! "; } // If no errors, echo the results if (!$errorExists) { echo "
- Name: $name " . "
- Usernname: $username " . "
- Gender: $gender " . "
- Email: $email " . "
- Subscribe to newsletter: $subscribe " . "
Success! The form has been submitted!
" . "Details:
" . "- "
. "
Error! Please address the following issues:
" . $errors; } ?>[/php]
i can get this form working if you subscribe to the newsletter with a checkbox but cannot get it to work if no subscription