https://thefinancegeek.com/js/contact-form.js

1// JavaScript Document
2$(document).ready(function() {
3
4    "use strict";
5
6    /*----------------------------------------------------*/
7    /*  Cntact Form Send Function
8    /*----------------------------------------------------*/
9
10    $(".contact-form").submit(function(e) {
11        e.preventDefault();
12        var name = $(".name");
13        var email = $(".email");
14        var subject = $(".subject");
15        var msg = $(".message");
16        var flag = false;
17        if (name.val() == "") {
18            name.closest(".form-control").addClass("error");
19            name.focus();
20            flag = false;
21            return false;
22        } else {
23            name.closest(".form-control").removeClass("error").addClass("success");
24        } if (email.val() == "") {
25            email.closest(".form-control").addClass("error");
26            email.focus();
27            flag = false;
28            return false;
29        } else {
30            email.closest(".form-control").removeClass("error").addClass("success");
31        } if (msg.val() == "") {
32            msg.closest(".form-control").addClass("error");
33            msg.focus();
34            flag = false;
35            return false;
36        } else {
37            msg.closest(".form-control").removeClass("error").addClass("success");
38            flag = true;
39        }
40        var dataString = "name=" + name.val() + "&email=" + email.val() + "&subject=" + subject.val() + "&msg=" + msg.val();
41        $(".loading").fadeIn("slow").html("Loading...");
42        $.ajax({

43            type: "POST",
44            data: dataString,
45            url: "php/contactForm.php",
46            cache: false,
47            success: function (d) {
48                $(".form-control").removeClass("success");
49                    if(d == 'success') // Message Sent? Show the 'Thank You' message and hide the form
50                        $('.loading').fadeIn('slow').html('<font color="#48af4b">Mail sent Successfully.</font>').delay(3000).fadeOut('slow');
51                        else
52                        $('.loading').fadeIn('slow').html('<font color="#ff5607">Mail not sent.</font>').delay(3000).fadeOut('slow');
53                        document.contactform.reset(); 
54                                  }
55        });
56        return false;
57    });
58
59    $("#reset").on('click', function() {
60        $(".form-control").removeClass("success").removeClass("error");
61    });
62
63    /*----------------------------------------------------*/
64    /*  Contact Form Validation
65    /*----------------------------------------------------*/
66    
67    $(".contact-form").validate({
68        rules:{ 
69                name:{
70                    required: true,
71                    minlength: 1,
72                    maxlength: 16,
73                },
74                email:{
75                    required: true,
76                    email: true,
77                },              
78                message:{
79                    required: true,
80                    minlength: 2,
81                    }
82                },
83                messages:{
84                        name:{
85                            required: "Please enter no less than (1) characters"
86                        }, 
87                        email:{
88                            required: "We need your email address to contact you",
89                            email: "Your email address must be in the format of [email protected]"
90                        }, 
91                        message:{
92                            required: "Please enter no less than (2) characters"
93                        }, 
94                    }
95    });
96    
97})
98
99
100