jQuery 验证必需的选择

Posted

技术标签:

【中文标题】jQuery 验证必需的选择【英文标题】：jQuery Validate Required Select 【发布时间】：2011-02-23 11:22:25 【问题描述】：

我正在尝试使用 jQuery Validate 插件来验证 html 选择元素。我将“必需”规则设置为 true，但它始终通过验证，因为默认选择零索引。有没有办法定义所需规则使用的空值？

UPD。例子。假设我们有以下 html 控件：

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

我希望验证插件使用“默认”值作为空。

【问题讨论】：

添加一些 sn-p 代码以便我们提供帮助。 可能重复：***.com/questions/1271640/jquery-validate-select-box 【参考方案1】：

这里概述了一个更简单的解决方案： 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>

【讨论】：

但是你必须给你的选项一个空值 - 并不总是可能或希望的 这不应该是公认的答案，因为原始发帖人特别要求使用“规则”，这是一个提供给验证构造函数的选项，并且不存在于标记中。有时您没有修改标记的奢侈。 （就个人而言，我只是不想在标记中加入逻辑。） @MasonHoutz 它仍然是标记中的逻辑，无论逻辑需要 value="" 还是 value="default"【参考方案2】：

您可以编写自己的规则！

 // 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."); 为了帮助未来的读者：SelectName 是指名称属性的值，而不是 id 属性的值。这有点令人困惑，因为在 JS 中工作时，通常使用 id 而不是名称。请参阅文档here：“规则（默认：从标记（类、属性、数据）中读取规则）类型：定义自定义规则的对象键/值对。键是元素的名称” 【参考方案3】：

最简单的解决方案

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

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

和jquery validationrequired规则will work

【讨论】：

【参考方案4】：

使用最小规则

将第一个选项值设置为 0

'selectName':min:1

【讨论】：

第一个值是固定的（这个值有一些后端逻辑）【参考方案5】：

你只需要把validate[required]作为这个选择的类，然后把一个带有value=""的选项

例如：

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

【讨论】：

【参考方案6】：

我不知道在提出问题时（2010 年）插件的情况如何，但我今天遇到了同样的问题并以这种方式解决了：

    给你的选择标签一个名字属性。例如在这种情况下

    &lt;select name="myselect"&gt;

    不要在标签选项中使用属性 value="default"，而是禁用默认选项或按照 Andrew Coats 的建议设置 value=""

    &lt;option disabled="disabled"&gt;Choose...&lt;/option&gt;

    或

    &lt;option value=""&gt;Choose...&lt;/option&gt;

    设置插件验证规则

    $( "#YOUR_FORM_ID" ).validate( rules: myselect: required: true );

    或

    &lt;select name="myselect" class="required"&gt;

Obs：Andrew Coats 的解决方案仅在您的表单中只有一个选项时才有效。如果您希望他的解决方案与多个选择一起使用，请在您的选择中添加一个名称属性。

希望对您有所帮助！ :)

【讨论】：

简而言之，将required 属性添加到&lt;select&gt; 标记，并将disabled 属性添加到第一个&lt;option&gt; 标记（或者具有selected 属性的标记，如果有的话） 【参考方案7】： 
<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 $

【讨论】：

【参考方案8】： 
<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>

选择值将是空白

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！【参考方案9】：

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

【讨论】：

【参考方案10】：

很简单，需要获取Select字段值，不能为“默认”。

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

【讨论】：

【参考方案11】：

如何验证选择“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;
        
    );

);

【讨论】：

欢迎来到 Stack Overflow！感谢您提供此代码 sn-p，它可能会提供一些有限的短期帮助。一个正确的解释would greatly improve 它的长期价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。

以上是关于jQuery 验证必需的选择的主要内容，如果未能解决你的问题，请参考以下文章

必需的验证错误消息未以 jquery 弹出模式形式显示

MVC 验证 - [必需] 属性抛出 jquery JSON.parse 异常

Jquery验证不适用于选择

jQuery 日期选择器验证问题

jquery gt选择器 语法

基于选择的jquery动态验证