Question

function validatForm(){
    $("#add_form input[type=text]").each(function() {
       if(this.value == null || this.value == '') {
            $(this).addClass("alert_focus");
            alert('Required Field Cannot Be Emmpty')
            $("html, body").animate({ scrollTop: $(this).offset().top }, 500);
        }
    });


<form id="add_form">
<table>
    <tr>
      <th>Select*</th>
      <th>Field A*</th>
      <th>Field B*</th>
      <th>Field C*</th>
    <tr>
    </tr>
      <td><select class="select" name="select1">
          <option value="" selected>Please Select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
      </td>
      <td><input type="text" name="a_field1" /></td>
      <td><input type="text" name="b_field1" /></td>
      <td><input type="text" name="c_field1" /></td>
    </tr>
    <tr>
      <td><select class="select" name="select2">
          <option>Please Select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
      </td>
      <td><input type="text" name="a_field2" /></td>
      <td><input type="text" name="b_field2" /></td>
      <td><input type="text" name="c_field2" /></td>
    </tr>
    <tr>
      <td><select class="select" name="select3">
          <option>Please Select</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
      </td>
      <td><input type="text" name="a_field3" /></td>
      <td><input type="text" name="b_field3" /></td>
      <td><input type="text" name="c_field3" /></td>
    </tr>
    ............ and so on.
</table>
<a href="javascript:void(0);" onclick="return validatForm()">Submit</a>
<input type="hidden" value="submit" value="submit" />
</form>

以上对输入[type =＆＃34; text＆＃34;]的效果很好。无论如何，我可以检查是否有任何select为空/ not_selected并识别该元素？

我试过了：

$(".select").each(function() {
if (!$(".select option:selected").length) {
    alert('Required Field Cannot Be Emmpty')
    $("html, body").animate({ scrollTop: $(this).offset().top }, 500);
}
});
return false;

但它似乎不起作用。感谢您的帮助:) 非常感谢

在RobG的帮助下，以下是适用的脚本：

<script>
function validatForm(){
    $("#add_cat input[type=text]").each(function() {
        if(!this.value) {
            $(this).addClass("alert_focus");
            alert('Required Field Cannot Be Emmpty');
            $("html, body").animate({ scrollTop: $(this).offset().top }, 500);    
        }
    });
    $('#add_cat select').each(function(i, select){
        if (select.selectedIndex <= 0) {
            alert('Please select an option');
        }
    return false;
    });
};
</script>

Answer 1

如果要迭代选择元素，则选择器为：'select'。

jQuery的each与内置的Array forEach 方法不同，参数是 index ，元素而不是可能需要的元素， index 。

您可以将选择的值与＆＃39;＆＃39;进行比较。（空字符串），但由于几乎所有浏览器都会默认选择第一个选项，因此更好的策略是将第一个选项设置为默认选项并检查，例如

<select name="...">
  <option value="" selected>Select one
  <option value="one">one
</select>

然后：

$('select').each(function(i, select){
  if (select.selectedIndex <= 0) {
    alert('Please select an option');
  }
});

如果没有选择任何选项，所选索引将为-1，这不应该经常发生，但需要适应。

Answer 2

你需要使用元素选择器（select）而不是类选择器（.select），然后你可以看到它是否有值而不是检查是否有选择的选项

$("select").each(function () {
    if (!$(this).val().length) {
        alert('Required Field Cannot Be Emmpty')
        $("html, body").animate({
            scrollTop: $(this).offset().top
        }, 500);
    }
});

表单验证循环以检查所有文本并选择不为空

2 个答案: