验证必选项

我正在尝试使用 jQueryValidateplugin 验证 html 选择元素。我将“必需”规则设置为 true，但它总是通过验证，因为默认情况下选择了零索引。有没有什么方法可以定义必需规则所使用的空值？

例如，假设我们有以下 html 控件:

<select>
<option value="default">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

我想验证插件使用“默认”值为空。

363821 次浏览
小开

使用最小规则

将第一个选项值设置为0

'selectName':{min:1}
小开
最佳答案

你可以写你自己的规则！

 // 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!" }
}
});
小开

这里提出了一个更简单的解决办法: 验证选择框

使该值为空并添加所需的属性

<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>
小开

这很简单，你需要得到选择字段值，它不能是“默认”。

if($('select').val()=='default'){
alert('Please, choose an option');
return false;
}
小开

我不知道这个插件在2010年被问到的时候是怎么样的，但是今天我遇到了同样的问题，并且用这种方式解决了它:

  1. 给您的选择标记一个 name 属性

    <select name="myselect">

  2. 如 Andrew Coats 所建议的那样，不要在标记选项中使用 value = “ default”属性，而是禁用 default 选项或设置 value = “”

    <option disabled="disabled">Choose...</option>

    或者

    <option value="">Choose...</option>

  3. 设置插件验证规则

    $(“ # Your _ FORM _ ID”) 规则: { Myselect: { need: true } } }) ;

    或者

    <select name="myselect" class="required">

观察: Andrew Coats 的解决方案只有当你在表单中只有一个选择时才有效。如果您希望他的解决方案与多个选择一起工作，请将 name 属性添加到您的选择中。

希望能有所帮助! :)

小开 
<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 $
小开

您只需要将 validate[required]作为这个 select 的类，然后放置一个 value = “”的选项

例如:

<select class="validate[required]">
<option value="">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
小开

最简单的解决办法

只需将第一个选项的值设置为空字符串 value=""

<option value="">Choose...</option>

和 Jquery 验证 required规则 will work

小开

在我的案例中,@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 的解决方案应该在常规情况下有效。

小开

如何验证选择“资格”它有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;
}
});


});
小开 
<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>

选择值将为空


提交答案