ajax加载表单时Jquery验证功能不起作用答案

【问题标题】：Jquery validation function not working when form loaded by ajaxajax加载表单时Jquery验证功能不起作用
【发布时间】：2018-05-31 07:42:50
【问题描述】：

我在 cs-cart 结帐中使用 Jquery 验证方法。当我使用 cm-ajax 类（css 默认类）通过 ajax 请求移动到这一步时，验证功能不起作用，但是如果我刷新页面，它会显示所有错误。

$("#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);
          }
        }
    });

刷新页面后的验证：

当我们通过 ajax 移动到帐单地址部分时，验证显示弹出窗口

【问题讨论】：

放置你的ajax函数
@Ankita 我正在使用 cm-ajax 类从一个步骤移动到另一个步骤，这是 cs-cart 的默认类。
此错误似乎是默认的 Javascript 行为，而不是 CS-Cart ajax 问题。尝试搜索“在 ajax 调用后重新绑定 javascript”或其他内容。

标签： jquery ajax cs-cart

【解决方案1】：

解决方案：这个问题是由于绑定造成的。所以我们需要在ajax调用后重新绑定javascript

 $(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);
              }
            }
        });
    });

【讨论】：