Question

在将所有必填字段发送到数据库之前，我必须检查是否已填写所有必填字段。这是通过列IDMandatory完成的。如果该字段是必填字段，则此列的值为True，如果不是，则为False。这是一个代码段：

此代码段存在问题，它无法正常运行（“ else”部分）。未填写任何必填文本框时，需要在按钮单击时触发。并且当所有必填文本框均已填写时，应激活“激活ajax”警报。当第一个条件满足时，我已经准备好了并且需要进行工作的ajax代码。

$(function() {
  $(".IDMandatory").each(function(i, el) {
    if ($(el).text().toUpperCase() === "TRUE") {
      $(el).closest("tr").find("input,select").prop("required", true);
    }
  });

  $("#myButton").on("click", function() {
    var ok = true;
    $("[required]").each(function() {
      $(this).css("border", "1px solid black"); // reset

      if (!$(this).val()) {
        ok = false;
        $(this).css("border", "1px solid red");
      }
     else {
         alert("Fill in remaining fields!");
         ok = false;  // Alert if mandatory fields are left unfilled
      }

    });
    if (ok) {
      alert('Activate the AJAX!'); // When everything if filled activate ajax code
    }
  });
});

有人可以帮我这个代码吗？

谢谢！

Answer 1

我认为您只需要将else条件移到检查ok的底部，请参见代码段：

$(function() {
  $(".IDMandatory").each(function(i, el) {
    if ($(el).text().toUpperCase() === "TRUE") {
      $(el).closest("tr").find("input,select").prop("required", true);
    }
  });

  $("#myButton").on("click", function() {
    var ok = true;
    $("[required]").each(function() {
      $(this).css("border", "1px solid black"); // reset

      if (!$(this).val()) {
        ok = false;
        $(this).css("border", "1px solid red");
      }
       
    });
    if (ok) {
      alert('Activate the AJAX!');
    } else {
      alert("Fill in the remaining mandatory fields!");
    }
  });
});

.IDKarakteristike
{
    display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="4" id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;">
  <tr style="color:White;background-color:#507CD1;font-weight:bold;">
    <th scope="col">Characteristic</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">Description</th>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRRF Adress</span>


    </td>
    <td>

      <span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>

    </td>
    <td>

      <span id="MainContent_gvKarakteristike_LabelMan_0" class="IDMandatory" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;display: none;">True</span>


    </td>
    <td>



      <input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" type="text" maxlength="4" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />

    </td>
  </tr>
  <tr style="background-color:White;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GFP Wear</span>


    </td>
    <td>

      <span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>

    </td>
    <td>

      <span id="MainContent_gvKarakteristike_LabelMan_1" class="IDMandatory" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;display: none;">True</span>


    </td>
    <td>



      <input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" type="text" maxlength="6" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />

    </td>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_2" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">FVD Weight </span>


    </td>
    <td>

      <span id="MainContent_gvKarakteristike_Label_2" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">3</span>

    </td>
    <td>

      <span id="MainContent_gvKarakteristike_LabelMan_2" class="IDMandatory" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;display: none;">True</span>


    </td>
    <td>



      <input name="ctl00$MainContent$gvKarakteristike$ctl04$txtBoxOpis" type="text" maxlength="8" id="MainContent_gvKarakteristike_txtBoxOpis_2" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />

    </td>
  </tr>
  <tr style="background-color:White;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_3" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GVDtreatment
</span>


    </td>
    <td>

      <span id="MainContent_gvKarakteristike_Label_3" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">5</span>

    </td>
    <td>

      <span id="MainContent_gvKarakteristike_LabelMan_3" class="IDMandatory" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;display: none;">False</span>


    </td>
    <td>

      <select name="ctl00$MainContent$gvKarakteristike$ctl05$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_3" margin-Left="100px" style="font-family:Georgia;height:35px;width:161px;">
				<option selected="selected" value=""></option>
				<option value="1">Lacquer
</option>
				<option value="2"> Hardwax Oil
</option>
				<option value="3">Lacquer
</option>
				<option value="4">Proteco 
</option>
				<option value="5">e Treatment</option>

			</select>



    </td>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_4" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">FVF  hierarchy
</span>


    </td>
    <td>

      <span id="MainContent_gvKarakteristike_Label_4" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">9</span>

    </td>
    <td>

      <span id="MainContent_gvKarakteristike_LabelMan_4" class="IDMandatory" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;display: none;">False</span>


    </td>
    <td>



      <input name="ctl00$MainContent$gvKarakteristike$ctl06$txtBoxOpis" type="text" maxlength="60" id="MainContent_gvKarakteristike_txtBoxOpis_4" margin-Left="100px" style="font-family:Georgia;height:30px;width:150px;" />

    </td>
  </tr>
</table>
</div>
<input type="button" class="button" id="myButton" value="Save" />

<br />
<br />
<br />
<div>

</div>

Answer 2

使用此

$(function() {
     $(".IDMandatory").each(function(i, el) {
if ($(el).text().toUpperCase() === "TRUE") {
  $(el).parents("tr").find("input,select").attr("required", true);
}
});

$("#myButton").on("click", function() {
var ok = true;
$("[required]").each(function() {
  $(this).css("border", "1px solid black"); // reset

  if (!$(this).val()) {
    ok = false;
    $(this).css("border", "1px solid red");
  }

});
if (ok) {
  alert('Activate the AJAX!');
} else {
    alert("Fill in the remaining mandatory fields!");
}
});
});

强制文本框为空时发出警报

2 个答案: