11/**
2- * .validate (https://jqueryvalidation.org)
3- * .post (https://api.jquery.com/jQuery.post/)
4- * reCaptcha v3 (https://developers.google.com/recaptcha/docs/v3)
2+ * .checkValidity | https://getbootstrap.com/docs/5.3/forms/validation
3+ * FormData | https://developer.mozilla.org/en-US/docs/Web/API/FormData
4+ * fetch | https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
5+ * reCaptcha v3 | https://developers.google.com/recaptcha/docs/v3
6+ *
57 * @author Raspgot
68 */
79
8- const publicKey = '' ; // GOOGLE public key
10+ const publicKey = 'GOOGLE_PUBLIC_KEY ' ; // GOOGLE public key
911
10- $ ( function ( ) {
11- check_grecaptcha ( ) ;
12+ onload = ( ) => {
13+ 'use strict'
1214
13- // If you add field, add rule and error message in validate function
14- $ ( '#contactform' ) . validate ( {
15- // Form fields rules
16- rules : {
17- name : {
18- required : true ,
19- minlength : 3 ,
20- } ,
21- email : {
22- required : true ,
23- email : true ,
24- } ,
25- message : {
26- required : true ,
27- minlength : 5 ,
28- } ,
29- } ,
30- // Error messages
31- messages : {
32- name : {
33- required : 'Please enter your name.' ,
34- minlength : 'Must be at least 3 characters long.' ,
35- } ,
36- email : 'Please enter a valid email.' ,
37- message : {
38- required : 'Please enter your message.' ,
39- minlength : 'Must be at least 5 characters long.' ,
40- } ,
41- } ,
42- errorClass : 'invalid-feedback' ,
43- // Dynamic validation classes
44- highlight : function ( element ) {
45- // Invalid
46- $ ( element ) . addClass ( 'is-invalid' ) . removeClass ( 'is-valid' ) ;
47- } ,
48- unhighlight : function ( element ) {
49- // Valid
50- $ ( element ) . addClass ( 'is-valid' ) . removeClass ( 'is-invalid' ) ;
51- } ,
52- // Action on submit
53- submitHandler : function ( form , event ) {
54- event . preventDefault ( ) ;
55- $ ( '#sendtext' ) . text ( 'SENDING...' ) ;
56- $ . post ( form . action , $ ( form ) . serialize ( ) )
57- . done ( function ( response ) {
58- alertShowing ( JSON . parse ( response ) ) ;
59- $ ( '#sendtext' ) . text ( 'SEND' ) ;
60- $ ( '#submit-btn' ) . prop ( 'disabled' , true ) ;
61- check_grecaptcha ( ) ;
62- } )
63- . fail ( function ( response ) {
64- alert ( response ) ;
65- } )
66- . always ( function ( ) {
67- // Timeout to reset form
15+ checkRecaptcha ( ) ;
16+
17+ let forms = document . querySelectorAll ( '.needs-validation' ) ;
18+ let spinner = document . getElementById ( 'loading-spinner' ) ;
19+
20+ Array . prototype . filter . call ( forms , function ( form ) {
21+ form . addEventListener ( 'submit' , function ( event ) {
22+ if ( form . checkValidity ( ) === false ) {
23+ event . preventDefault ( ) ;
24+ event . stopPropagation ( ) ;
25+ }
26+ form . classList . add ( 'was-validated' ) ;
27+ if ( form . checkValidity ( ) === true ) {
28+ event . preventDefault ( ) ;
29+ form . classList . remove ( 'was-validated' ) ;
30+ spinner . classList . remove ( 'd-none' ) ;
31+
32+ let data = new FormData ( form ) ;
33+ let alertClass = 'alert-danger' ;
34+
35+ fetch ( 'AjaxForm.php' , {
36+ method : 'post' ,
37+ body : data
38+ } ) . then ( ( data ) => {
39+ return data . text ( ) ;
40+ } ) . then ( ( txt ) => {
41+ txt = JSON . parse ( txt ) ;
42+ if ( txt . error === false ) {
43+ alertClass = 'alert-success' ;
44+ }
45+ let alertBox = '<div class="alert ' + alertClass + '">' + txt . message + '</div>' ;
46+ if ( alertClass && txt ) {
47+ form . querySelector ( '#alert-statut' ) . insertAdjacentHTML ( 'beforeend' , alertBox ) ;
48+ form . reset ( ) ;
49+ checkRecaptcha ( ) ;
50+ }
51+ spinner . classList . add ( 'd-none' ) ;
6852 setTimeout ( function ( ) {
69- $ ( '#submit-btn' ) . prop ( 'disabled' , false ) ;
70- $ ( 'form' ) . trigger ( 'reset' ) ;
71- $ ( 'form' ) . each ( function ( ) {
72- $ ( this )
73- . find ( '.form-control' )
74- . removeClass ( 'is-valid' ) ;
75- } ) ;
76- } , 3000 ) ;
53+ form . querySelector ( '#alert-statut' ) . innerHTML = '' ;
54+ } , 5000 ) ;
55+ } ) . catch ( ( err ) => {
56+ console . log ( 'Error encountered: ' + err ) ;
57+ spinner . classList . add ( 'd-none' ) ;
7758 } ) ;
78- } ,
59+ }
60+ } , false ) ;
7961 } ) ;
80- } ) ;
62+ } ;
8163
82- // Get token from API
83- function check_grecaptcha ( ) {
64+ var checkRecaptcha = ( ) => {
8465 grecaptcha . ready ( function ( ) {
85- grecaptcha
86- . execute ( publicKey , {
87- action : 'ajaxForm' ,
88- } )
89- . then ( function ( token ) {
90- $ ( "[name='recaptcha-token']" ) . val ( token ) ;
91- } ) ;
66+ grecaptcha . execute ( publicKey , {
67+ action : 'submit'
68+ } ) . then ( function ( token ) {
69+ // input with recaptcha-token name take the recaptcha token value
70+ document . getElementsByName ( 'recaptcha-token' ) [ 0 ] . value = token ;
71+ } ) ;
9272 } ) ;
93- }
94-
95- // Show response in .alert
96- function alertShowing ( response ) {
97- // Apply class alert
98- if ( response . error == true ) {
99- $ ( '#response-alert' ) . addClass ( 'alert-danger' ) ;
100- $ ( '#response-alert' ) . removeClass ( 'alert-success' ) ;
101- } else {
102- $ ( '#response-alert' ) . addClass ( 'alert-success' ) ;
103- $ ( '#response-alert' ) . removeClass ( 'alert-danger' ) ;
104- }
105- // Display alert with message
106- $ ( '#response-alert' ) . html ( response . message ) ;
107- $ ( '#response-alert' ) . removeClass ( 'd-none' ) ;
108- $ ( '#response-alert' ) . addClass ( 'd-block' ) ;
109- }
73+ } ;
0 commit comments