0

以下のコードは、現在表示されているフィールドセット内の必須フィールドを検証しますが、それらのフィールドがテキスト ボックスである場合のみです。

ラジオ ボタンであるフィールドも検証するコードを組み込むにはどうすればよいですか?

私のjsfiddle >> http://jsfiddle.net/justmelat/zwXRr/

私の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>

私のjqueryコード：>>

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

1 に答える 1

0

ラジオボタンの値が空かどうかを確認するのではなく、ユーザーがチェックしたかどうかを確認します。それらのいずれかがオンになっている場合は、同じグループ (同じ名前を持つ) 内のすべてのラジオ ボタンをオンにする必要もあります。この場合、必要なラジオ ボタンごとにエラー メッセージが重複しないように、リストを事前にフィルタリングしています。

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;
});​

提供された HTML にはいくつかの問題もあります。たとえば、異なる要素と入力の ID の重複 (許可されていません) や=、チェックボックスの値の文字の欠落などです。

少なくとも 1 つのチェック ボックスをオンにする必要があるロジックがない限り、通常のチェックボックスの方が簡単です。私の修正ではそれが考慮されていませんでした。そのため、飛行機に対して 3 つの検証エラー メッセージが表示されます。

于 2012-06-14T19:33:57.503 に答える