Jquery Form Validation - using if statement for validation?

Question

I have a form that I am using jquery/mail chimp.

A portion of the form is hidden and shows (using Jquery Slide()) if a radio button is checked.

Every thing works great as it should.

The Problem:

The form sets to validate the sections that are hidden as well. However some users will not always check the radio button meaning that the form will faulter because the hidden forms will not validate since they are not filled in.

Does any body have any work arounds on this?

Here is the code.

The trigger (shows the rest of the form.)

<div id="accordionup">
    <li>
        <input name="group[5]" type="radio" id="mce-group-5-1"         value="32"checked="checked" />
      <label for="mce-group-5-1">No
    </li>
 </div>

When the user selects the radio button the form below slides down. All I would need it to do is add class="required" to a couple (this is key too) not all the fields that slide down. So essentially some kind of conditional/if statement.

<div id="accordion">
                     <div class="mc-address-group">
                              <li class="statefield">
                                    <label for="mce-MMERGE1-state">State:</label>
                                    <input type="text" value="" maxlength="20" name="MMERGE1[state]" id="mce-MMERGE1-state" class="" />
                                </li>
                                <li class="zipfield">
                                    <label for="mce-MMERGE1-zip">Zip Code:</label>
                                    <input type="text" value="" maxlength="10" name="MMERGE1[zip]" id="mce-MMERGE1-zip" class="" />
                                </li>
                                <li class="countryfield">
</div>

I am using this for the slide down

<script>
$('#accordion').click(function() {
  $('#slider').slideDown('slow', function() {

  });
});

$('#accordionup').click(function() {
  $('#slider').slideUp('slow', function() {

  });
});

</script>

Thank you.

Posting the HTML and jQuery you have so far would help a lot. — Valentin Flachsel
– Valentin Flachsel, Commented Oct 6, 2010 at 20:00

Valentin Flachsel · Accepted Answer · 2010-10-12 20:51:44Z

4

Try this:

$("#mce-group-5-1").change(function() {
    $("#mce-MMERGE1-state").toggleClass('required');
});

You can add more IDs in the selector, separated by commas. .toggleClass() will check if the selected element has the specified class. If it has it, it will remove it, if it doesn't, it will add it.

It seems that you are using the jQuery Validate plug-in, so as an alternative, you could add and remove rules on the fly with .rules() like this:

$("#mce-group-5-1").change(function() {
    if ($(this).is(":checked")) {
        $("#mce-MMERGE1-state").rules("add", "required");
    } else {
        $("#mce-MMERGE1-state").rules("remove"); // remove all validation rules
    }
});

See a complete demo on JSFiddle (uses a checkbox instead of radio buttons).

Hope this helps.

edited Oct 12, 2010 at 20:51

answered Oct 6, 2010 at 20:55

Valentin Flachsel

10.8k10 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Driftwood Over a year ago

FreekOne, really appreciate you taking the time, I am trying the toggle function but it seems to not work for me. <script type="text/javascript"> $(function() { $("#accordion").click(function() { $('#mce-MMERGE1-addr1').toggleClass('required'); return false; }); }); </script>

Valentin Flachsel Over a year ago

I am unsure how exactly you're using it, but in this JSFiddle Demo it works just fine. Note the req_ prefix I used on all the hidden fields' ID that should be required when visible. I made it so it would be simpler to write the selector.

Driftwood Over a year ago

I think "input[id^=req_]" thi is the part that was confusing me. You're right it works great. Another thing I tried that also worked is to use that portion of the form and use the load function to add that in.. it's not elegent but it works :( Still new at this. Thanks a whole bunch for taking the time.

Valentin Flachsel Over a year ago

$("input[id^=req_]") is a wildcard selector. It basically means all "input" elements which have an ID that begins with "req_" so the only thing you need to do is to prefix the IDs of all the required fields in the hidden part of the form.

Driftwood Over a year ago

I ended up using the "<script> $("#accordion").click(function () { $.ajax({ url: 'HeckYa.html', cache: false, success: function(html){ $('#slider').append(html); } });}); </script> The other worked just great but there was an issue with the mail chimp for essentially still trying to validate.. Side note, do you know if using this method to get the form like this poses any security issues, they both live on the same server.

|

Collectives™ on Stack Overflow

Jquery Form Validation - using if statement for validation?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related