This one more Webslesson post on How to validate form data using jQuery plugin. Now in this post we have use jqBoostrapValidation plugin for validate form data and make spam free contact form with Ajax and PHP. In one of previous post, we have use parsleyjs for form data validation and submit form data using Ajax. Here also we will show you how to validate form data by using jqBootstraoValidation plugin and submit form data using Ajax with PHP.
jqBootstrapValidation is a jQuery plugin for validate bootstrap form data. It mainly display validation error in help-block of Bootstrap library class. It is a simple form validation plugin, which mainly used with Bootstrap library. If you have use Bootstrap library for your front end use, then it will help you in form validation. Because it has used Bootstrap library element as users type. Validation of Form data is a headache of every programmer, but if you have used bootstrap library, then this plugin will helpful to validate form data.
This plugin has used HTML5 validator attributes on html field, and it has used data attributes for display error. If you want to set any input, which data has required for submit form, then at that time you can simply used requred="required" attribute, then this plugin will directly scan this HTML5 attributes for validate that input field. Now question aris how can we display error of that validation, then in this plugin used data-validation-required-message attributes has been used for display required validation error.
After this suppose you want to validate email fields data, for this you have to just used input="email" this plugin will automatically generates error if email fields data in not in proper email format.
Same way, we want to validate mobile number in form field, then at that time we can use pattern attributes like pattern="^[0-9]{10}$" this pattern will validate mobile number which must be in number format with the length 10 digit if data is not in this format then it will display error. For display pattern validation error, this plugin has use data-validation-pattern-message this data attribute for display pattern mismatch validation error. If you want to get details documentation of this plugin, you can get here.
See Also
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Contact Form Validation using jqBootstrapValidation with Ajax PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.6/jqBootstrapValidation.js"></script>
<style>
.box
{
max-width:600px;
width:100%;
margin: 0 auto;;
}
.form-group p
{
color:#a94442;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Contact Form Validation using jqBootstrapValidation with Ajax PHP</h3>
<br />
<form id="simple_form" novalidate="novalidate">
<div class="control-group">
<div class="form-group mb-0 pb-2">
<input type="text" name="contact_name" id="contact_name" class="form-control form-control-lg" placeholder="Name" required="required" data-validation-required-message="Please enter your name." />
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<div class="form-group">
<input type="email" name="contact_email" id="contact_email" class="form-control form-control-lg" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address." />
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<div class="form-group">
<input type="tel" name="contact_mobile" id="contact_mobile" class="form-control form-control-lg" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number." pattern="^[0-9]{10}$" data-validation-pattern-message="10 digits needed" />
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<div class="form-group">
<textarea name="contact_message" id="contact_message" class="form-control form-control-lg" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="text-danger help-block"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary" id="send_button">Send</button>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#simple_form input, #simple_form textarea').jqBootstrapValidation({
preventSubmit: true,
submitSuccess: function($form, event){
event.preventDefault();
$this = $('#send_button');
$this.prop('disabled', true);
var form_data = $("#simple_form").serialize();
$.ajax({
url:"send.php",
method:"POST",
data:form_data,
success:function(){
$('#success').html("<div class='alert alert-success'><strong>Your message has been sent. </strong></div>");
$('#simple_form').trigger('reset');
},
error:function(){
$('#success').html("<div class='alert alert-danger'>There is some error</div>");
$('#simple_form').trigger('reset');
},
complete:function(){
setTimeout(function(){
$this.prop("disabled", false);
$('#success').html('');
}, 5000);
}
});
},
});
});
</script>
send.php
<?php
//send.php
if(isset($_POST["contact_name"]))
{
require 'class/class.phpmailer.php';
$mail = new PHPMailer;
$mail->IsSMTP();
$mail->Host = 'smtpout.secureserver.net';
$mail->Port = '80';
$mail->SMTPAuth = true;
$mail->Username = 'xxxx';
$mail->Password = 'xxxx';
$mail->SMTPSecure = '';
$mail->From = $_POST['contact_email'];
$mail->FromName = $_POST['contact_name'];
$mail->AddAddress('web-tutorial@programmer.net');
$mail->WordWrap = 50;
$mail->IsHTML(true);
$mail->Subject = 'New Business Enquiry from ' . $_POST['contact_name'];
$message_body = $_POST["contact_message"];
$message_body .= '<p>With mobile number ' . $_POST["contact_mobile"] . '</p>';
$mail->Body = $message_body;
if($mail->Send())
{
echo 'Thank you for Contact Us';
}
}
?>
Hi Great Tutorials
ReplyDelete$('#simple_form input, #simple_form textarea,#simple_form select').jqBootstrapValidation({
How do you get the select field to validate ?
Hi
ReplyDeleteCan you explain how to validate select Fields with this ?
where the fuck class.phpmailer.php is ? you idiot
ReplyDeletedoesnt validate
ReplyDelete