如何使用 jquery 验证引导多选下拉菜单答案

【问题标题】：How to validate bootstrap multiselect dropdown using jquery如何使用 jquery 验证引导多选下拉菜单
【发布时间】：2015-07-28 15:27:45
【问题描述】：

我正在尝试使用下面给出的代码验证 Bootstrap 多选下拉菜单，表单正在得到验证，但我没有得到正确的输出，验证消息位于选择框上方，当单击提交按钮，然后选择选项后，消息没有被删除。请帮助解决我的问题。

      <script type="text/javascript">
        $(document).ready(function() {
        $.validator.addMethod("needsSelection", function (value, element) {
            var count = $(element).find('option:selected').length;
            return count > 0;
          });

        $.validator.messages.needsSelection = 'Select Atleast One College'; 

          $("#User").validate({
                  rules: {    
                    'college[]': {
                    needsSelection: true
                    }
                  },
              }
          });

 $("#submit").click(function(e) {
    var isvalidate=$("#User").valid();
    if(isvalidate=="true")
    {

    }
    else
    {
        $("#User").submit();
    }
 });

});

    <form id="User" name="User" method="post" enctype="multipart/form-data" action="index">   
        <select data-placeholder="Choose College Name" name="college[]" class="chosen-select" id="college" multiple tabindex="4">
                    <option value=""></option>
                    <option value="1">abc</option>
                    <option value="2">abc1</option>
        </select>
    <a id="submit">Submit</a>
    </form>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap validation

【解决方案1】：

这不是对您问题的直接回答，但可能会为您的问题提供解决方案。

首先，将锚标记更改为按钮——因为锚标记具有您必须应对的内置导航行为 (event.preventDefault())，因此会增加不必要的复杂性。按钮（输入或按钮标签）或 div 标签或 p 怎么样？）

接下来，一个更简单的结构来评估您的表单：

jsFiddle Demo

HTML：（只是将您的锚提交按钮更改为：

<input id="dosubmit" type="submit" value="Submit" />

注意：请勿使用“提交”作为提交按钮的 id，因为这是保留关键字

javascript/jQuery:

$('#User').submit(function(e){
    var col = $('#college').val();
    if ( col==null || col=='' || col=='Please choose one:' ){
        $('#college').css('background','yellow').focus();
        return false;
    }else{
        $('#college').css('background','transparent');
        alert('Form submitted');
        //continue to submit the form - but not now
        return false;
    }
});

请为您的项目考虑this verification script。

【讨论】：

【解决方案2】：

这不是您问题的答案，但我会建议您并鼓励您一起使用服务器端验证。

您的数据应在接收 ajax 调用的 php 文件上进行验证并根据需要进行清理。

如果出现问题，响应将始终传递回您的表单，为您的用户提供所需的反馈。

您可以在 Internet 上找到许多有关如何执行此操作的示例。

这里有一个例子：https://scotch.io/tutorials/submitting-ajax-forms-with-jquery

总结一下：不要进行客户端验证！

【讨论】：