Mimic_7 - javascript

hide/show fieldsets based on product type dropdown. Validate required fields that r within fieldsets that are currently visible. Show msg detailing which required fields are empty, prevent form submission until required fields are completed.

by joelpurra

HTML

<p>Answer to <a href="http://stackoverflow.com/questions/10516874/jquery-validate-radio-form-field-type-within-visible-fieldsets">Validate radio form field type within visible fieldsets?</a></p>

<form method="post" action="">
    <div id="holdErrMsg"></div>
    <fieldset id="mainSection" name="mainSection">
                <legend style="color:blue; font-weight:bold">Project Overview Section</legend>
                
                <table style="width: 100%">
                    <tr>
                        <td style="height: 33px; width: 178px;">Name</td>
                        <td style="height: 33px"><input  id="1125" name="1125" class="1125-required" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 33px; width: 178px;">Email</td>
                        <td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 178px">Product Title</td>
                        <td><input  id="1089" name="1089" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 178px">Product Type</td>
                        <td><select id="1169" name="1169">
                        <option value="">Select</option>
                        <option value="Cars">Cars</option>
                        <option value="Boats">Boats</option>
                        <option value="Planes">Planes</option>
                        </select></td>
                    </tr>
                                        <tr><td>
                                        <button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button>
                                        </td></tr>
                                    </table>
            </fieldset>

            <fieldset id="section-11" name="section-11">
                <legend...

JavaScript

$("#section-11,#section-12,#section-13,#section-1011").hide();

var projtype = new Array({
    value: 'Cars',
    sect_id: 'fieldset#section-11'
}, {
    value: 'Planes',
    sect_id: 'fieldset#section-12'
}, {
    value: 'Boats',
    sect_id: 'fieldset#section-13'
});
$("select#1169").on('change', function() {
    var thisVal = $(this).val();
    var sect_id = "";
    //$('fieldset[id!="mainSection"]').hide();
    $(projtype).each(function() {
        $(this.sect_id).hide();
        if (this.value == thisVal) {
            $(this.sect_id).show();
        }
    });
});

$("#btnCatchReqFlds").on('click', function() {
    $("#holdErrMsg").empty();
    var distinctRadiobuttonGroups = [];
    var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function(index) {
        // Pre-filter to keep only one radio button per radio button group
        var $this = $(this);

        if ($this.is(":radio")) {
            var name = $this.attr("name");

            if (distinctRadiobuttonGroups[name]) {
                // Non-unique, filter out
                return false;
            }

            distinctRadiobuttonGroups[name] = true;

            return true;
        }

        // Keep all non-radio buttons
        return true;
    }).filter(function() {
        var $this = $(this);

        if ($this.is(":checkbox")) {
            // Required check boxes must be checked
            return !$this.is(":checked");
        } else if ($this.is(":radio")) {
            var foundCheckedRadio = false,
                radioButtonGroupSelector = ":radio[name=" + $this.attr("name") + "]";

            $this.parents("form").find(radioButtonGroupSelector).each(function() {
                // Check if this radio button was checked
                // (could be optimized to return when finding the first checked radio button)
                foundCheckedRadio = foundCheckedRadio || $(this).is(":checked");
            });

      ...