Home » jQuery » Responsive PHP contact form with jQuery field validation

Responsive PHP contact form with jQuery field validation

jQuery form validation

In the previous tutorial I showed you how to create a Responsive PHP contact form with HTML5 validation. But for some clients, HTML5 form validation is not cool enough, so they prefer the jQuery version.

The advantages of jQuery validation are that you can easily customize the error text messages, their color and position. And it has a better browser support.

Demo Download

For the form validation I’ve used the jQuery validation plugin. The plugin is great, but it might be tough to understand at the beginning. It has a download button, but there is so much stuff that you can easily get confused. And because I like everything being as simple as possible and knowing that time is valuable to developers, I’ve decided to write this tutorial. Now let’s get to the code.

Advertisement

The HTML

The HTML is a standart HTML5 form – inputs and labels.

<form name="form1" id="ff" method="post" action="insert.php">
    <h1>PHP contact form with jQuery Validation</h1>
	<p>A working demo of HTML5 and PHP Responsive Contact Form with jQuery field validation. It offers you the opportunity to add different error labels for different fields.</p>	
        <label>
		<span>Name*:</span>
        <input type="text" placeholder="Please enter your name" name="name" id="name" autofocus>
        </label>
        
        <label>
		<span>City*:</span>    
		<input type="text" placeholder="Please enter your city" name="city" id="city">
        </label>
        
        <label>
		<span>Phone:</span>
        <input type="tel" placeholder="Please enter your phone" name="phone" id="phone">
        </label>
        
        <label>
		<span>Email*:</span>
        <input type="email" placeholder="[email protected]" name="email" id="email">
      	</label>
	<input class="sendButton" type="submit" name="Submit" value="Send">
			
	</form>

Let’s include some jQuery

In case someone didn’t understood, we will use jQuery to validate the form. This means that if somebody forgets to fill a required field, he will be reminded to do so.

Don’t forget to include the jQuery library as well as the jquery.validate.js file.

 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#ff").validate({
			submitHandler:function(form) {
				SubmittingForm();
			},
			rules: {
				name: "required",
				phone: "required",
				email: {				
					required: true,
					email: true
				},
				city: {
					required: true
				}
			},
			messages: {
				name: "Please enter your name",
				phone: "Please enter your phone",
				email: "Please enter valid email adress",
				city: "Please enter city"
			}
		});
	});
</script>

The syntax is simple to understand. The rule name: “required” means that the input with name=”name” is compulsory. Then in the messages section we can customize the error message.

The CSS for the Error messages

Finally we go through the style customization of the error labels. We simply change the styles for #ff label.error.

#ff label.error {
	position:absolute;
	width: 250px;
	font-size:12px;
	color: red;
	margin-top:-25px;
	margin-left:4px;
}

That’s it. Now we have a working PHP mail form with jQuery validation for the required fields.

In the previous tutorial I showed you how to create a Responsive PHP contact form with HTML5 validation. But for some clients, HTML5 form validation is not cool enough, so they prefer the jQuery version. The advantages of jQuery validation are that you can easily customize the error text messages,&hellip;

Review Overview

User Rating: 3.19 ( 4 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Facebook Comments ...