Question

I’m looking for some JS or jQuery (either plugin or otherwise) to help me with manipulating the class=”required” that jQuery’s validation plugin uses for form validation in the form fields. I need to be able to toggle that class to equal nothing when a Delete button is clicked.

Here’s more context on why I need to be able to toggle that class “required on or off:

1) This is a registration form for more than one attendee for an event

2) there is a control in the form allowing the registrant to “Delete” an attendee (if s/he decides to bring 2 instead of 4 people). This toggles the visibility of that DIV where that attendee’s form elements live. I can see what attendee the form elements belong to since my PHP loop created them with first_name_1 (for the first attendee) and then the second attendee would have first_name_2. Then each div_attendee_1 or 2 or 3 has their form fields with this counter appended to the end of each field.

3) When a div is rendered visibility=”hidden” I also reset the form elements in that div. BUT I think I need to also access the class=”required” to render it class=””.

What’s the best way to do that? Here’s the jQuery I have so far to toggle the visibility and reset the field values:

Validation:

 <script>
  $(document).ready(function(){
    $("#the_form").validate();
  });
  </script>

And then:

<script language="JavaScript">
  function showhidefield(hideablearea){
   document.getElementById(hideablearea).style.visibility = "hidden";
   var el = document.getElementById(hideablearea);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    }
    $('#' + hideablearea).hide().find("input").val("");
    $('#' + hideablearea).attr('disabled', true);
  }
</script>

Should I just try and rewrite the elements using inner.html?

Thanks!

Answer 1

Change

$('#' + hideablearea).hide().find("input").val("");

to

$('#' + hideablearea).hide().find("input").val("").removeClass("required");