我正在尝试使用 jQuery Validate 插件来验证 html 选择元素。我将“必需”规则设置为 true，但它始终通过验证，因为默认选择零索引。有没有办法定义所需规则使用的空值？
UPD。例子。假设我们有以下 html 控件：
<select>
<option value="default">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
我希望验证插件使用“默认”值作为空。
【问题讨论】：
这里概述了一个更简单的解决方案： Validate select box
将值设为空并添加所需的属性
<select id="select" class="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
【讨论】：
您可以编写自己的规则！
// add the rule here
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg !== value;
}, "Value must not equal arg.");
// configure your validation
$("form").validate({
rules: {
SelectName: { valueNotEquals: "default" }
},
messages: {
SelectName: { valueNotEquals: "Please select an item!" }
}
});
【讨论】：
$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
最简单的解决方案
只需将第一个选项的值设置为空字符串value=""
<option value="">Choose...</option>
和jquery validationrequired规则will work
【讨论】：
使用最小规则
将第一个选项值设置为 0
'selectName':{min:1}
【讨论】：
你只需要把validate[required]作为这个选择的类，然后把一个带有value=""的选项
例如：
<select class="validate[required]">
<option value="">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
【讨论】：
我不知道在提出问题时（2010 年）插件的情况如何，但我今天遇到了同样的问题并以这种方式解决了：
给你的选择标签一个名字属性。例如在这种情况下
<select name="myselect">
不要在标签选项中使用属性 value="default"，而是禁用默认选项或按照 Andrew Coats 的建议设置 value=""
<option disabled="disabled">Choose...</option>
或
<option value="">Choose...</option>
设置插件验证规则
$( "#YOUR_FORM_ID" ).validate({
rules: {
myselect: { required: true }
}
});
或
<select name="myselect" class="required">
Obs：Andrew Coats 的解决方案仅在您的表单中只有一个选项时才有效。如果您希望他的解决方案与多个选择一起使用，请在您的选择中添加一个名称属性。
希望对您有所帮助！ :)
【讨论】：
required 属性添加到<select> 标记，并将disabled 属性添加到第一个<option> 标记（或者具有selected 属性的标记，如果有的话）
<select class="design" id="sel" name="subject">
<option value="0">- Please Select -</option>
<option value="1"> Example1 </option>
<option value="2"> Example2 </option>
<option value="3"> Example3 </option>
<option value="4"> Example4 </option>
</select>
<label class="error" id="select_error" style="color:#FC2727">
<b> Warning : You have to Select One Item.</b>
</label>
<input type="submit" name="sub" value="Gönder" class="">
jQuery :
jQuery(function() {
jQuery('.error').hide(); // Hide Warning Label.
jQuery("input[name=sub]").on("click", function() {
var returnvalue;
if(jQuery("select[name=subject]").val() == 0) {
jQuery("label#select_error").show(); // show Warning
jQuery("select#sel").focus(); // Focus the select box
returnvalue=false;
}
return returnvalue;
});
}); // you can change jQuery with $
【讨论】：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="myform">
<select class="form-control" name="user_type">
<option value="">Select</option>
<option value="2">1</option>
<option value="3">2</option>
</select>
</form>
<script>
$('#myform').validate({ // initialize the plugin
rules: {
user_type:{ required: true},
}
});
</script>
选择值将是空白
【讨论】：
@JMP 提到的解决方案在我的案例中进行了一些修改：
我在addmethod 中使用element.value 而不是value。
$.validator.addMethod("valueNotEquals", function(value, element, arg){
// I use element.value instead value here, value parameter was always null
return arg != element.value;
}, "Value must not equal arg.");
// configure your validation
$("form").validate({
rules: {
SelectName: { valueNotEquals: "0" }
},
messages: {
SelectName: { valueNotEquals: "Please select an item!" }
}
});
有可能，我这里有一个特殊情况，但没有找到原因。但是@JMP 的解决方案应该在正常情况下有效。
【讨论】：
很简单，需要获取Select字段值，不能为“默认”。
if($('select').val()=='default'){
alert('Please, choose an option');
return false;
}
【讨论】：
如何验证选择“qualifica”它有 3 个选择
$(document).ready(function(){
$('.validateForm').validate({
rules: {
fullname: 'required',
ragionesociale: 'required',
partitaiva: 'required',
recapitotelefonico: 'required',
qualifica: 'required',
email: {
required: true,
email: true
},
},
submitHandler: function(form) {
var fullname = $('#fullname').val(),
ragionesociale = $('#ragionesociale').val(),
partitaiva = $('#partitaiva').val(),
email = $('#email').val(),
recapitotelefonico = $('#recapitotelefonico').val(),
qualifica = $('#qualifica').val(),
dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;
$.ajax({
type: "POST",
url: "util/sender.php",
data: dataString,
success: function() {
window.location.replace("./thank-you-page.php");
}
});
return false;
}
});
});
【讨论】：