Skip to content

Instantly share code, notes, and snippets.

/gist:8316258

Created January 8, 2014 12:42
Show Gist options
  • Save anonymous/8316258 to your computer and use it in GitHub Desktop.
Save anonymous/8316258 to your computer and use it in GitHub Desktop.
Download ZIP
Client-side validation example using the jQuery Validation plugin (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)
Raw
gistfile1.html
<?php
$mail_sent = false;
$success_msg = 'Thanks for the comment dude!';
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$errors = array();
$name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$email_address = filter_var($_POST['email_address'], FILTER_VALIDATE_EMAIL);
$comment = filter_var($_POST['comment'], FILTER_SANITIZE_STRING);
if (!$name) $errors['name'] = 'Please enter your name.';
if (!$email_address) $errors['email_address'] = 'Please enter a valid email address.';
if (!$comment) $errors['comment'] = 'Please enter a comment.';
if (empty($errors))
{
$body = "Name: {$name}\n\n";
$body = wordwrap($body, 70);
$mail_sent = mail('[email protected]', 'Contact Form Submission', $body, "From: {$email_address}");
if (!$mail_sent) $errors['server'] = 'There was an error sending the email';
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<style type="text/css">
span.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
span.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
</head>
<body>
<div id="container">
<?php if ($mail_sent): ?><p><em><?php echo $success_msg ?></em></p><?php endif ?>
<form id="myform" name="contact" action="" method="post">
<p>Name:
<?php if (isset($errors['name'])): ?>
<span class="error name"><?php echo $errors['name']; ?></span>
<?php endif ?>
</p>
<input type="text" id="name" name="name" value="<?php if (isset($name)) echo $name; ?>" />
<p>Email address:
<?php if (isset($errors['email_address'])): ?>
<span class="error email_address"><?php echo $errors['email_address'];?></span>
<?php endif ?>
</p>
<input type="text" name="email_address" value="<?php if (isset($email_address)) echo $email_address; ?>" />
<p>Add a comment:
<?php if (isset($errors['comment'])): ?>
<span class="error comment"><?php echo $errors['comment']; ?></span>
<?php endif ?>
</p>
<textarea id="text_area" rows="11" cols="72" name="comment"></textarea>
<input type="submit" name="send" id="send_button" value="Send">
</form>
</div>
<script type="text/javascript">
(function() {
$("#myform").validate({
errorElement: "span",
errorPlacement: function(error, element) {
error.insertAfter( element );
},
success: function(label) {
label.text("ok!").addClass("success");
},
submitHandler: submitForm,
rules: {
name: {
required:true
},
email_address: {
required:true,
email: true
},
comment: {
required:true
}
}
});
function submitForm(form) {
$.ajax({
type: "POST",
url: "contact-us.php",
data: $(form).serialize(),
success: function(message) {
$(form).replaceWith('<p><em>'+message+'</em></p>');
}
});
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment