https://www.mycustombasement.com/include/contact-form.js

1/*
2********************************************
3CONTACT FORM
4CREATED BY: ASHLEY STEVENS 2015-07-29
5LAST REVISED BY: ASHLEY STEVENS 2015-09-08
6********************************************
7*/
8jQuery(document).ready(function ($) {
9	/* Hide the captcha fields */
10	$('.specialgroup').css('display','none');
11	
12	/* USE THIS CODE IF YOU HAVE A VERY LARGE FORM AND DON'T WANT TO HAND-WRITE ALL OF THE FIELDS THAT NEED TO BE REQUIRED*/
13	$.extend($.validator.messages, { required: '<i class="glyphicon glyphicon-info-sign"></i> This is a required entry' });
14	
15	/* ADD VALIDATION TO THE PHONE NUMBER */
16	$.validator.addMethod('phoneUS', function(phone_number, element) {phone_number = phone_number.replace(/\s+/g, '');return this.optional(element) || phone_number.length > 9 && phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);}, '<i class=\'glyphicon glyphicon-info-sign\'></i> Please enter a valid phone number XXX-XXX-XXXX');
17	
18    /* validation for the first form, note how the id of the form is used */
19	$('#contactform').validate({
20        rules: {
21			phone: {required: true, phoneUS: true},
22            email: {required: true, email: true}
23        },
24        messages: {
25            //NAME, PHONE, EMAIL, ETC ARE THE NAMES OF THE FIELDS. IF YOU DONT PUT A REQUIRED FIELD'S NAME AND MESSAGE BELOW, THE DEFAULT 'This field is required.' MESSAGE WILL BE USED. HELPFUL FOR A VERY LARGE FORM.
26            name: "<i class='glyphicon glyphicon-info-sign'></i> Please enter your full name",
27            phone: "<i class='glyphicon glyphicon-info-sign'></i> Please enter a valid phone number XXX-XXX-XXXX",
28            email: "<i class='glyphicon glyphicon-info-sign'></i> Please enter a valid email address"
29        },
30		errorPlacement: function(error, element) {
31			if ( (element.is(":radio")) || (element.is(":checkbox")) ) {
32				error.prependTo( element.parent() );
33			}
34			else { // This is the default behavior of the script for all fields
35				error.insertAfter( element );
36			}
37        },
38		
39		 submitHandler: function () {
40            $.ajax({
41                type: "POST",
42                url: "../include/process.php",
43                dataType: "json",
44                data: $("#contactform").serialize(),
45                statusCode: {
46                    200: function () {
47                        $('div#message').html('<i class="glyphicon glyphicon-ok"></i> Your Message Has Been Sent');
48                        $('div#message').addClass('alert-success');
49						$('div#message').removeClass('alert-danger');
50                        $('#contactform')[0].reset();
51                    },
52                    403: function () {
53                        $('div#message').html('<i class="glyphicon glyphicon-remove"></i> Your Message Has Not Been Sent');
54                        $('div#message').addClass('alert-danger');
55                    }
56                }
57            });
58        }
59		
60    });
61    /**/
62	
63	/* validation for second form, note how the id is being used, and where to update it. if you have more forms, just copy/paste this chunk and change the ids, then change the id on the message div in the html and also in the code below (need different ids on the message div for each form, so the message sent phrase only shows on the appropriate form) */
64	$('#requestform').validate({
65        rules: {
66			phone: {required: true, phoneUS: true},
67            email: {required: true, email: true},
68			'services-needed[]':{required:true}
69        },
70        messages: {
71            //NAME, PHONE, EMAIL, ETC ARE THE NAMES OF THE FIELDS. IF YOU DONT PUT A REQUIRED FIELD'S NAME AND MESSAGE BELOW, THE DEFAULT 'This field is required.' MESSAGE WILL BE USED. HELPFUL FOR A VERY LARGE FORM.
72            name: "<i class='glyphicon glyphicon-info-sign'></i> Please enter your full name",
73            phone: "<i class='glyphicon glyphicon-info-sign'></i> Please enter a valid phone number XXX-XXX-XXXX",
74            email: "<i class='glyphicon glyphicon-info-sign'></i> Please enter a valid email address"
75        },
76		errorPlacement: function(error, element) {
77			if ( (element.is(":radio")) || (element.is(":checkbox")) ) {

78				error.prependTo( element.parent() );
79			}
80			else { // This is the default behavior of the script for all fields
81				error.insertAfter( element );
82			}
83        },
84		
85		submitHandler: function () {
86            $.ajax({
87                type: "POST",
88                url: "../include/process.php",
89                dataType: "json",
90                data: $("#requestform").serialize(),
91                statusCode: {
92                    200: function () {
93                        $('div#message2').html('<i class="glyphicon glyphicon-ok"></i> Your Message Has Been Sent');
94                        $('div#message2').addClass('alert-success');
95						$('div#message2').removeClass('alert-danger');
96                        $('#requestform')[0].reset();
97                    },
98                    403: function () {
99                        $('div#message2').html('<i class="glyphicon glyphicon-remove"></i> Your Message Has Not Been Sent');
100                        $('div#message2').addClass('alert-danger');
101                    }
102                }
103            });
104        }
105    });
106    /**/
107    
108    
109});