Question

The code below will validate required fields within currently visible fieldsets, but only if those fields are textboxes.

How how do I encorporate code to also validate fields that are radio buttons?

my jsfiddle >> http://jsfiddle.net/justmelat/zwXRr/

my html: >>

<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 style="color:fuchsia; font-weight:bold">Car Details Section</legend>
    <table cellpadding="2" style="width: 100%">
      <tr>
        <td style="width: 334px; height: 35px"><label>Size:*</label></td>
        <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /></td>
      </tr>
      <tr>
        <td style="height: 35px; width: 334px">Color:*</td>
        <td style="height: 35px">
          <select id="1433" class="1433-required" name="1433">
            <option value="Orange">Orange</option>
            <option value="Blank">Blank</option>
            <option value="Green">Green</option>
          </select>
        </td>
      </tr>
      <tr>
        <td style="width: 334px">Description:</td>
        <td>
          <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
        </td>
      </tr>
    </table>
  </fieldset>
  <fieldset id="section-12" name="section-12">
    <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
    <table cellpadding="2" style="width: 100%">
      <tr>
        <td style="width: 334px; height: 35px"><label>Size:</label></td>
        <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
      </tr>
      <tr>
        <td style="height: 35px; width: 334px">Color*:</td>
        <td style="height: 35px">
          <input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required"/>Orange
          <input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required"/>Blue
          <input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required"/>Green
        </td>
      </tr>
      <tr>
        <td style="width: 334px">Description:</td>
        <td>
          <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
        </td>
      </tr>
    </table>
  </fieldset>
  <fieldset id="section-13" name="section-13">
    <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
    <table cellpadding="2" style="width: 100%">
      <tr>
        <td style="width: 334px; height: 35px"><label>Size:</label></td>
        <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
      </tr>
      <tr>
        <td style="height: 35px; width: 334px">Color:*</td>
        <td style="height: 35px">
          <input type="radio" name="1834" id="1834" value="None" class="valuetext" class="1834-required">None
          <input type="radio" name="1834" id="1834" value="All" class="valuetext" class="1834-required">All
        </td>
      </tr>
      <tr>
        <td style="width: 334px">Description:</td>
        <td>
          <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
        </td>
      </tr>
    </table>
  </fieldset>
  <br>
  <fieldset id="section-1011" name="section-1011">
    <legend style="color:green; font-weight:bold">Misc Info Section</legend>
    <table cellpadding="2" style="width: 100%">
      <tr>
        <td style="width: 334px; height: 35px"><label>Size:</label></td>
        <td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
      </tr>
      <tr>
        <td style="height: 35px; width: 334px">Color:</td>
        <td style="height: 35px">
          <select id="1302" name="1302">
            <option value="Orange">Orange</option>
            <option value="Blank">Blank</option>
            <option value="Green">Green</option>
          </select>
        </td>
      </tr>
      <tr>
      <td style="width: 334px">Description:</td>
        <td>
          <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea>
        </td>
      </tr>
    </table>
  </fieldset>
</form>

my jquery code: >>

$("#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 requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() {
    return $.trim($(this).val()) === "";
  });

  if (requiredButEmpty.length) {
    requiredButEmpty.each(function () {
      $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
    });
  }

  return !requiredButEmpty.length;
});
​

Answer 1

You don’t check if the radio button value is empty, you check if it has been checked by the user. You also need to check all radio buttons in the same group (with the same name) if any one of them has been checked. In this case I’m pre-filtering the list to avoid duplicate error messages for each required radio button.

Implemented in a fork of your jsfiddle.

$("#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");
            });

            // The result after checking all radio buttons in the same group
            return !foundCheckedRadio;
        } else {
            // Evertything not a checkbox or radio button
            return $.trim($this.val()) === "";
        }
    });
    if (requiredButEmpty.length) {
        requiredButEmpty.each(function() {

            $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
        });
    }
    return !requiredButEmpty.length;
});​

There are also some issues with the provided HTML; for example duplicate ID for different elements and input (not allowed) and missing = characters for the values of the checkboxes.

Normal checkboxes are easier, unless you have some logic that at least one of them has to be checked. My fix did not take that into consideration, which is why you will get three validation error messages for planes.