javascript - [必填] 字段不适用于下拉框的解决方法

Question

我正在使用 Bootstrap 3 来验证我的表单中的字段，我发现使用某些浏览器，特别是 ios safari，我的 [必需] 表单项未被验证。为了弥补这一点，我制作了一个脚本来检查元素是否已标记为必需，如果该字段的值为 '' 则出现警报。它适用于文本框字段，但出于某种原因，它似乎不检查下拉框。我在我的所有下拉框中使用了一个占位符，其值为 '' ，所以应该看到那些没有适当填写。

我的脚本在这里

$("form").submit(function(e) {
    var mobile = "<?php echo $_SESSION['ads']; ?>";
    var ref = $(this).find("[required]");

    if(mobile == 0){
        $(ref).each(function(){
            if ( $(this).val() == '' )
            {
                alert("Required field should not be blank.");

                $(this).focus();

                e.preventDefault();
                return false;
            }
        }); 
    }return true;
});

这是我的一个表单的示例:

      <div class="form-group required">
        <label for="donationType">Type</label>
        <select class="form-control" name="donationType" id="donationType" style="min-width: 140px;" required>
          <option value="" disabled selected>-</option>
          <option>Item</option>
          <option>Mileage</option>
          <option>Money</option>
          <option>Time</option>
        </select>
      </div>

任何对此的见解将不胜感激。或者在不支持正常 Bootstrap 验证的浏览器上进行验证的任何其他方法。

Answer 1

通过添加

$(this).val() == null || 

它在 Safari 中也适用于我:

$("form").submit(function(e) {
    var mobile = "0";
    var ref = $(this).find("[required]");
console.log(ref);
    if(mobile == 0){
console.log(0);
        $(ref).each(function(){
            if ( $(this).val() == null || $(this).val() == '' )
            {
                alert("Required field should not be blank.");

                $(this).focus();

                e.preventDefault();
                return false;
            }
        }); 
    }
    return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group required">
        <label for="donationType">Type</label>
        <select class="form-control" name="donationType" id="donationType" style="min-width: 140px;" required>
          <option value="" disabled selected>-</option>
          <option>Item</option>
          <option>Mileage</option>
          <option>Money</option>
          <option>Time</option>
        </select>
      </div>
  <input type="submit" value="submit"/>
  </form>