Search code examples
jqueryajaxcs-cart

Jquery validation function not working when form loaded by ajax


I am using Jquery validate method in cs-cart checkout. when I move to this step through ajax request using cm-ajax class(css default class),the validate function does not work,But if i refresh the page it shows all the error.

$("#step_two_billing_address").validate({
        rules: {
            "user_data[company]": "required",
            "user_data[company_gst]" :{
                regex : '[0-9]{2}[a-zA-Z]{5}[0-9]{4}[a-zA-Z]{1}[0-9]
               {1}[zZ]{1}[a-zA-Z0-9]{1}',
                maxlength : 15,
            },
            "user_data[b_zipcode]": "required",
            "user_data[b_phone]":{
                required :true,
                regex : '[6789][0-9]{9}',
                maxlength : 10,
            } ,
            "user_data[b_address]": "required",
            "user_data[b_city]": "required",
            "user_data[b_state]": "required",
        },

        messages: {

            "user_data[company]": "Please enter your company name",
            "user_data[b_zipcode]": "Please enter your pincode",
            "user_data[phone]": {
                required : "Please enter contact number",
                regex    : "Please enter a valid contact number",
                maxlength : "Please enter a valid contact number",
            },
            "user_data[b_address]": "Please enter billing address",
            "user_data[b_city]": "Please enter your city",
            "user_data[b_state]": "Please enter your state"
        },
        errorElement : 'span',
        errorPlacement: function(error, element) {
          element.addClass('error invalid');
          var label = $('#element').siblings('label');
          label.attr('class', 'active');
          var placement = $(element).data('error');
          if (placement) {
            $(placement).append(error)
          } else {
            error.insertAfter(element);
          }
        }
    });

Validation after Refreshing Page:

validation show popup when we move to billing address section throgh ajax enter image description here


Solution

  • Solution : This issue was due to binding. So we need to re-bind javascript after ajax call

     $(document).on('click','.btn',function() {
            $("#step_two_billing_address").validate({
                rules: {
                    "user_data[company]": "required",
                    "user_data[company_gst]" :{
                        regex : '[0-9]{2}[a-zA-Z]{5}[0-9]{4}[a-zA-Z]{1}[0-9]{1}[zZ]{1}[a-zA-Z0-9]{1}',
                        maxlength : 15,
                    },
                    "user_data[b_zipcode]": "required",
                    "user_data[b_phone]":{
                        required :true,
                        regex : '[6789][0-9]{9}',
                        maxlength : 10,
                    } ,
                    "user_data[b_address]": "required",
                    "user_data[b_city]": "required",
                    "user_data[b_state]": "required",
                },
    
                messages: {
    
                    "user_data[company]": "Please enter your company name",
                    "user_data[b_zipcode]": "Please enter your pincode",
                    "user_data[phone]": {
                        required : "Please enter contact number",
                        regex    : "Please enter a valid contact number",
                        maxlength : "Please enter a valid contact number",
                    },
                    "user_data[b_address]": "Please enter billing address",
                    "user_data[b_city]": "Please enter your city",
                    "user_data[b_state]": "Please enter your state"
                },
                errorElement : 'span',
                errorPlacement: function(error, element) {
                  element.addClass('error invalid');
                  var label = $('#element').siblings('label');
                  label.attr('class', 'active');
                  var placement = $(element).data('error');
                  if (placement) {
                    $(placement).append(error)
                  } else {
                    error.insertAfter(element);
                  }
                }
            });
        });