How can I clone a fieldset without keeping the rules of the fields?

Question

I cloned my fieldset and it works perfect. I clear all fields value perfectly. The only issue I\'m having is the rules follow if submit had been hit before adding the new fields

Answer 1

In several places you have class="required" which would be the problem had this been inside of your input elements. However, you have this class inside of your elements, so we can rule that out.

jQuery Validate needs unique name attributes on every input, so even if you accidentally duplicated the names, jQuery Validate would only work on the first instance of each element, not work on the clone... and if the element does not exist when .validate() is called, you can completely rule out the .validate() method as the cause.

The only ways to declare rules on dynamically created elements, after .validate() is called, are as follows...

1. using the .rules('add') method (although why would you add rules you say you don't want and I don't see this in your code)

2. using inline HTML 5 validation attributes such as required="required". (I don't see these in your code)

3. using inline class declarations such as class="required". (Again, you're only doing this on the elements)

In other words, I see absolutely nothing in your code that will cause any validation rules to carry over into your dynamically created, or cloned, elements. Either you've neglected to show us the code causing the problem or you are mistaken about what you're seeing.

Inspect the DOM using your browser's developer tools and verify that the cloned markup looks like you've intended and that you don't have any attributes or classes as described in #2 and #3 above.

---

If you've tried .rules('remove') and it's failed, as per documentation, this method "...manipulates only rules specified via rules-option or via rules('add')". In other words, you can only use .rules('remove') to remove rules put in place by the .validate() or .rules('add') methods.

Keep in mind that .rules('remove') can only be attached to a selector representing a single input element...

$('#singleInput').rules('remove');     // <- ONE input

Otherwise, if your selector targets a groups of elements, you'll need to wrap it within a jQuery .each()...

$('.groupOfInputs').each(function() {  // <- multiple inputs
    $(this).rules('remove');
});

---

EDIT:

As per the jsFiddle as posted in the comments, you can see what's really happening.

You are not having an issue with rules being cloned from the original section, and your issue really has absolutely nothing to do with rules. The issue is that you're cloning the error messages themselves... error messages only intended for the original set of elements. You really need to re-think your whole approach as I don't even understand the advantage to cloning anything here.

Since you already go to great lengths to rename everything, simply use jQuery to write all new markup for each section rather than blindly cloning things that include dynamic content like error messages you don't even want/need. In other words, just create the new form elements with their new names, while NOT creating, cloning or copying any dynamic content from elsewhere. Your code will actually become simplified since you won't have to do so much DOM manipulation when it's being created properly in the first place.