How to validate dynamically generated fields with bootstrap validator. `Error Cannot read property 'apply' of undefined`

Question

I have my form here that contains the fields that i want validated. Currently there is one Name of Recipient field but the user can click the addKit button which will dynamically generate new input fields for the user to fill out. The validation library i am using validates the fields by matching the input field name to the bootstrapValidator fields list. In this case for instance, it will look at and match the name kits[COZ1][1][name] to the field name in the fields list in the javascript. Now as there are more inputs generated the name will change dynamically, the next input name will be kits[COZ1][2][name] and so on... I am using the addField method to add the field dynamically but run into an error. What am i doing wrong here?



Requestor


  Requestor Name
  
  
  
  
    
  



  Requestor Email
  
  
  
  
    
  



  Requestor Broker Dealer
  
  
  
  
    
  


Kit Details

 $description): ?>
  
    
    
      
        
        
      
        
          Please enter the Quantity of Kits Needed
        
      
      

    
    
    
  



    Name of Recipient
    
    
      
        
          
        
      
    


                            



  Delivery Method
    
    
        
            
  




Success  Thanks for placing your Order, we will contact you shortly.

I have a my validation rules set.

    $('#order').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },

    submitHandler: function(validator, form, submitButton) {
      $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...


      var bv = form.data('bootstrapValidator');
      // Use Ajax to submit form data
      $.post(form.attr('action'), form.serialize(), function(result) {
        $('#order').bootstrapValidator("resetForm",true);
        console.log(result);
      }, 'json');
    },
    excluded: [':disabled'],

    fields: {
      kits[COZ1][1][name]: {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please supply recipient name'
          }
        }
      },
      requestorName: {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please supply your name'
          }
        }
      },
      requestorEmail: {
        validators: {
          notEmpty: {
            message: 'Please supply your email address'
          },
          emailAddress: {
            message: 'Please supply a valid email address'
          }
        }
      },
      firm: {
        validators: {
          stringLength: {
            min: 3,
          },
          notEmpty: {
            message: 'Please supply your Broker Dealer'
          }
        }
      },
      /*
      address1: {
      validators: {
      stringLength: {
      min: 8,
    },
    notEmpty: {
    message: 'Please supply recipient street address'
  }
  }
  },
  address2: {
  validators: {
    stringLength: {
      min: 8,
    },
    notEmpty: {
      message: 'Please supply your street address'
    }
  }
  },
  city: {
  validators: {
    stringLength: {
      min: 4,
    },
    notEmpty: {
      message: 'Please supply recipient city'
    }
  }
  },
  state: {
  validators: {
    notEmpty: {
      message: 'Please select recipient state'
    }
  }
  },
  zip: {
  validators: {
    notEmpty: {
      message: 'Please supply recipient zip code'
    },
    zipCode: {
      country: 'US',
      message: 'Please supply a vaild zip code'
    }
  }
  },
  phone: {
  validators: {
    notEmpty: {
      message: 'Please supply recipient phone number'
    },
    phone: {
      country: 'US',
      message: 'Please supply a vaild phone number with area code'
    }
  }
  },

  ship_email: {
  validators: {
    notEmpty: {
      message: 'Please supply recipient address'
    },
    emailAddress: {
      message: 'Please supply a valid email address'
    }
  }
  },
  */
  }

  }).on('click', '.kitAdd',function() {
    var data = kitAdd($(this).attr("id").split("_")[1]);
    console.log(data);
    var prefix = data[0];
    var suffix = data[1];
    var type = data[2];

    var template = $("#detail_"+type);
    var clone = template.clone();
    clone.attr('id', "detail_"+type);
    // clone.insertBefore(template);
    var option = clone.find('input');
    var name = prefix + "[name]";
    option.attr('name', prefix + "[name]");
    var obj = clone.find('[name="'+suffix+'[name]"]')
    $("form#order").bootstrapValidator("addField", obj);
  });

kitAdd function simply returns data needed for input name.

How to validate dynamically generated fields with bootstrap validator. `Error Cannot read property 'apply' of undefined`

Answers (0)

Related Questions

How to validate dynamically generated fields with bootstrap validator. `Error Cannot read property &#39;apply&#39; of undefined`

Answers (0)

Related Questions

How to validate dynamically generated fields with bootstrap validator. `Error Cannot read property 'apply' of undefined`