https://garoweonline.com/custom/frontendJS/donation.js

1/*==============================================================*/
2// Donation JS
3/*==============================================================*/
4(function ($) {
5    "use strict"; // Start of use strict
6    //------Only Numeric input field Start------------------
7    $(".only-numeric").bind("keypress", function (e) {
8        var keyCode = e.which ? e.which : e.keyCode
9        var fval = $(".only-numeric").val();
10        if (!(keyCode >= 48 && keyCode <= 57)) {
11            return false;
12        }
13    });
14    //------Only Numeric input field End------------------
15
16    //------Pattern with 2 decimal point values Start-------    
17    // pattern="^\d*(\.\d{0,2})?$"
18    $(document).on('keydown', 'input[pattern]', function(e){
19        var input = $(this);
20        var oldVal = input.val();
21        var regex = new RegExp(input.attr('pattern'), 'g');
22  
23        setTimeout(function(){
24          var newVal = input.val();
25          if(!regex.test(newVal)){
26          input.val(oldVal); 
27          }
28        }, 0);
29        });
30    //------Pattern with 2 decimal point values End------------------
31
32    //------Donate Form-1  Select on others conditions Start---------------
33    if($("input[name='donate_amt'].dr-1:checked").val() == "others"){
34        $("#custom_amount_div-1").show();
35    }else{
36        $("#custom_amount_div-1").hide();
37    }
38    $(document).on("change", "input[name='donate_amt'].dr-1", function() {
39        var radioValue = $("input[name='donate_amt'].dr-1:checked").val();
40        if(radioValue == "others"){
41            $("#custom_amount_div-1").show();
42        }else{
43            $("#custom_amount_div-1").hide();
44        }
45    });
46
47    $(document).on("change", "input[name='donate_type'].typer-1", function() {
48        var tRadio = $("input[name='donate_type'].typer-1:checked").val();    
49        if(tRadio == "monthly"){
50            $("#other_label-1").hide();            
51            $("#custom_amount_div-1").hide();
52            $("input[name='donate_amt'][value='50'].dr-1").prop('checked', true);
53        }else{
54            $("#other_label-1").show();
55        }
56    });
57    //------Donate Form-1  Select on others conditions End------------------
58
59    //------Donate Form-2  Select on others conditions Start---------------
60    if($("input[name='donate_amt'].dr-2:checked").val() == "others"){
61        $("#custom_amount_div-2").show();
62    }else{
63        $("#custom_amount_div-2").hide();
64    }
65    $(document).on("change", "input[name='donate_amt'].dr-2", function() {
66        var radioValue = $("input[name='donate_amt'].dr-2:checked").val();
67        if(radioValue == "others"){
68            $("#custom_amount_div-2").show();
69        }else{
70            $("#custom_amount_div-2").hide();
71        }
72    });
73
74    $(document).on("change", "input[name='donate_type'].typer-2", function() {
75        var tRadio = $("input[name='donate_type'].typer-2:checked").val();    
76        if(tRadio == "monthly"){
77            $("#other_label-2").hide();            
78            $("#custom_amount_div-2").hide();
79            $("input[name='donate_amt'][value='50'].dr-2").prop('checked', true);
80        }else{
81            $("#other_label-2").show();
82        }
83    });
84    //------Donate Form-1  Select on others conditions End------------------
85
86    //------Donate Form-1 validation on submit Start---------------
87    $("#donation-form-1").validate({          
88        errorClass: "error fail-alert",
89        validClass: "valid success-alert",
90        rules: {
91            donate_amt: {
92                required: true,
93            },
94            donate_type: {
95                required: true,
96            },
97            custom_amount: {
98                required: true,
99                min: 2
100            }
101        },
102        messages: {
103            donate_amt: {
104                required: "Please select amount"
105            },        
106            donate_type: {
107                required: "Please select donation type"
108            },
109            custom_amount: {
110                required: "Please enter custom amount",
111                min: "Custom amount must be at least 2"
112            }
113        },
114        submitHandler: function(form) {
115        form.submit();
116        }
117    });

118    //------Donate Form-1 validation on submit End------------------
119
120    //------Donate Form-2 validation on submit Start---------------
121    $("#donation-form-2").validate({          
122        errorClass: "error fail-alert",
123        validClass: "valid success-alert",
124        rules: {
125            donate_amt: {
126                required: true,
127            },
128            donate_type: {
129                required: true,
130            },
131            custom_amount: {
132                required: true,
133                min: 2
134            }
135        },
136        messages: {
137            donate_amt: {
138                required: "Please select amount"
139            },        
140            donate_type: {
141                required: "Please select donation type"
142            },
143            custom_amount: {
144                required: "Please enter custom amount",
145                min: "Custom amount must be at least 2"
146            }
147        },
148        submitHandler: function(form) {
149        form.submit();
150        }
151    });
152    //------Donate Form-2 validation on submit End------------------
153}(jQuery)); // End of use strict