[必填] 字段在下拉框上不起作用的解决方法

Workaround for [required] fields not working on dropdown boxes

本文关键字：不起作用 解决 方法 必填 字段      更新时间：2023-09-26

我正在使用 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>

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

通过添加

$(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>

相关文章：