我正在使用 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 验证的浏览器上进行验证的任何其他方法。
最佳答案
通过添加
$(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>
关于javascript - [必填] 字段不适用于下拉框的解决方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35273963/