0

I have a dynamic form where I can remove/add elements based on some selections.

Whenever I add new elements as a result of a toggle, I add their validation, and this happens one-way only. Can I be guaranteed that

  • on removal of the element, $(form).valid() will still work -- it has the old validation but it won't find the element in the DOM, so validation will not fire;
  • on re-add of the element, the duplicate validation is harmless because it just overwrites the exact same previous one?

In other words, is the toggle is completely harmless even with a One-Way Validation Add only? It works in my test, but I wanted to confirm.

Here, when you toggle Radio Button 3, a dynamic field is added/removed. If you keep toggling I imagine you're always replacing the same Required rule, rather than accumulating new ones. And if you hide it, the validation still exists but the element isn't in the DOM so the Form is valid (see console output below). 

$('#form').validate({
    // No error messages, just highlight
    errorPlacement : function(error, element) {}
});
$('#form input').each(function(index, item) {
   $(item).rules('add', { required : true } );
});

$('input[type=radio][name=radiogroup').change(function() {
    if ( $(this).val() == '3') {
       $('#form').append('<input type="text" id="textDynamic" name="textDynamic"/><br/>');
       
       // One-Way Add Validation: always (re-)add validation for dynamic field
       $('#textDynamic').rules('add', { required : true } );
       // End One-Way Add Validation
       
    } else {
       $('#form #textDynamic').remove();
    }
});

$('#validate').click(function() {
   if ($('#form').valid())
    console.log('Valid');
   else
    console.log('Not valid');
});
.error {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="form">
   Field 1: <input type="text" id="text1" name="text1"/><br/><br/>
   
   <input type="radio" id="radio1" name="radiogroup" value="1"/>Radio 1<br/>
   <input type="radio" id="radio2" name="radiogroup" value="2"/>Radio 2<br/>
   <input type="radio" id="radio3" name="radiogroup" value="3"/>Radio 3 (this toggles a new field)<br/>  
   
</form>

<button id="validate">Validate Form</button>
gene b.
  • 10,512
  • 21
  • 115
  • 227
  • You remove the element, it's gone... not validated. You add an element along with its rule, it will validate. So what exactly is your concern here? What do you mean "harmless"? What is "one-way"; as opposed to "two-way" validation, whatever that is? – Sparky Jan 29 '18 at 06:50
  • BTW - your demo does not even work. The whole point of the live snippet feature is so that your demo actually works within this page. – Sparky Jan 29 '18 at 06:52
  • First, by "One-Way Validation" I mean the validation doesn't get REMOVED when the dynamic toggle field is TOGGLED OFF. I could have done it, but it remains hanging there. Is this harmless when the option is toggled off -- looks like the form is validated correctly without it, since the element doesn't exist, but I wanted to confirm. Second: The demo works. Click "FULL PAGE" when you run the snippet. As you toggle on/off and then click Validate, the Console at the bottom shows the status. My question was, is One-Way Validation OK with the removal/re-addition of the toggled field. – gene b. Jan 29 '18 at 14:42
  • This is one of the strangest jQuery Validate questions. I don't understand what you want here. In other words, you keep asking if this is "harmful", without explaining what that even means? Harmful how? What is worrying you? That you're going to blow up the browser? – Sparky Jan 29 '18 at 18:52

0 Answers0