javascript - 表单验证循环检查所有文本并选择非空

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>

到目前为止，上述内容对于 input[type="text"] 效果很好。 无论如何，我可以检查任何选择是否为空/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、element 而不是 element、< em>索引，这可能是预期的。

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

<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，这种情况不会经常发生，但需要适应。