https://www.hindujacollege.edu.in/assets/js/contact.form.js

1/**
2*
3* -----------------------------------------------------------------------------
4*
5* Template : Educavo - Education HTML Template
6* Author : rs-theme
7* Author URI : http://www.rstheme.com/
8*
9* -----------------------------------------------------------------------------
10*
11**/
12
13/*(function($) {
14    'use strict';
15    // Get the form.
16    var form = $('#contact-form');
17
18    // Get the messages div.
19    var formMessages = $('#form-messages');
20
21    // Set up an event listener for the contact form.
22    $(form).submit(function(e) {
23        // Stop the browser from submitting the form.
24        e.preventDefault();
25
26        // Serialize the form data.
27        var formData = $(form).serialize();
28
29        // Submit the form using AJAX.
30        $.ajax({
31            type: 'POST',
32            url: $(form).attr('action'),
33            data: formData
34        })
35        .done(function(response) {
36            // Make sure that the formMessages div has the 'success' class.
37            $(formMessages).removeClass('error');
38            $(formMessages).addClass('success');
39
40            // Set the message text.
41            $(formMessages).text(response);
42
43            // Clear the form.
44            $('#name, #email, #phone, #subject, #message').val('');
45        })
46        .fail(function(data) {
47            // Make sure that the formMessages div has the 'error' class.
48            $(formMessages).removeClass('success');
49            $(formMessages).addClass('error');
50
51            // Set the message text.
52            if (data.responseText !== '') {
53                $(formMessages).text(data.responseText);
54            } else {
55                $(formMessages).text('Oops! An error occured and your message could not be sent.');
56            }
57        });
58    });
59
60})(jQuery);*/
61
62// Yash Code
63(function($) {
64    'use strict';
65
66    var form = $('#contact-form');
67    var formMessages = $('#form-messages');
68
69    // Utility functions
70    function isValidEmail(email) {
71        var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
72        return regex.test(email);
73    }
74
75    function showError(inputId, message) {
76        $('#' + inputId).addClass('is-invalid');
77        $('#' + inputId).next('.error-msg').remove(); // remove previous
78        $('#' + inputId).after('<div class="error-msg text-danger">' + message + '</div>');
79    }
80
81    function clearError(inputId) {
82        $('#' + inputId).removeClass('is-invalid');
83        $('#' + inputId).next('.error-msg').remove();
84    }
85
86    // Field blur validations
87    $('#name').on('blur', function() {
88        var name = $(this).val().trim();
89        if (name.length > 150) {
90            showError('name', 'Name cannot exceed 150 characters.');
91        } else {
92            clearError('name');
93        }
94    });
95
96    // $('#email').on('blur', function() {
97    //     var email = $(this).val().trim();
98    //     if (!isValidEmail(email)) {
99    //         showError('email', 'Please enter a valid email address.');
100    //     } else {
101    //         clearError('email');
102    //     }
103    // });
104
105    $('#phone').on('input', function() {
106        this.value = this.value.replace(/[^0-9]/g, '');
107    });
108
109    // $('#phone').on('blur', function() {
110    //     var phone = $(this).val().trim();
111    //     if (!/^\d{10}$/.test(phone)) {
112    //         showError('phone', 'Phone number must be exactly 10 digits.');
113    //     } else {
114    //         clearError('phone');
115    //     }
116    // });
117
118    // Form submit with validation
119    $(form).submit(function(e) {
120        e.preventDefault();
121
122        var name = $('#name').val().trim();
123        var email = $('#email').val().trim();
124        var phone = $('#phone').val().trim();
125        var subject = $('#subject').val().trim();
126        var message = $('#message').val().trim();
127
128        let hasError = false;
129
130        // Name validation
131        if (name.length > 150) {
132            showError('name', 'Name cannot exceed 150 characters.');
133            hasError = true;
134        } else {
135            clearError('name');
136        }
137
138        // Email validation
139        if (!isValidEmail(email)) {
140            showError('email', 'Please enter a valid email address.');
141            hasError = true;
142        } else {
143            clearError('email');
144        }
145
146        // Phone validation
147        if (!/^\d{10}$/.test(phone)) {
148            showError('phone', 'Phone number must be exactly 10 digits.');
149            hasError = true;
150        } else {
151            clearError('phone');
152        }
153
154        if (hasError) {
155            return; // stop form submit if errors
156        }
157
158        var formData = $(form).serialize();
159
160        // Proceed to AJAX submit
161        $.ajax({
162            type: 'POST',
163            url: $(form).attr('action'),
164            data: formData
165        })
166        .done(function(response) {
167            // $(formMessages).removeClass('error').addClass('success').text(response);
168            // $('#name, #email, #phone, #subject, #message').val('');
169            // $('.error-msg').remove();
170            let res = typeof response === 'string' ? JSON.parse(response) 

170: response;
171
172            if (res.status === 'success') {
173                // $(formMessages).removeClass('error').addClass('success').text(res.message);
174                $(formMessages).removeClass('error').addClass('success').text(res.message).show();
175                $('#name, #email, #phone, #subject, #message').val('');
176                $('.error-msg').remove(); // clear all error messages
177
178                setTimeout(function() {
179                    $(formMessages).fadeOut('slow', function() {
180                        $(this).text('').removeClass('success').show();
181                        location.reload();
182                    });
183                }, 2000);
184            } else {
185                $(formMessages).removeClass('success').addClass('error').text(res.message);
186            }
187        })
188        .fail(function(data) {
189            // $(formMessages).removeClass('success').addClass('error');
190            // if (data.responseText !== '') {
191            //     $(formMessages).text(data.responseText);
192            // } else {
193            //     $(formMessages).text('Oops! An error occurred and your message could not be sent.');
194            // }
195            $(formMessages).removeClass('success').addClass('error');
196            $(formMessages).text('Oops! An error occurred and your message could not be sent.');
197        });
198    });
199
200})(jQuery);