使用Jquery Validate插件验证bootstrap-select [英] Validation of bootstrap-select using Jquery Validate plugin

问题描述

我遇到的问题是使用bootstrap-select.js插件和jquery validate插件来验证美化的select. bootstrap-select.js期望使用类selectpicker并遵循以下代码:

I am facing problem to validate select which is beautified using bootstrap-select.js plugin using jquery validate plugin. bootstrap-select.js is expecting class selectpicker and following one line of code:

$('.selectpicker').selectpicker();

用于美化html.

但是，这会导致使用jquery validate插件进行验证时出现问题.除非直到直到直到class class selectpicker都未删除，否则选择才完全有效.删除班级后，将正确执行验证. 以下是我的html供选择:

However it is causing problem in validations using jquery validate plugin. The select in not at all validated unless and untill class selectpicker in not removed. Once class is removed then validations are properly performed. Following is my html for select:

<select class="input-medium required" id="editCategory_sltCategoryName"
name="editCategory_sltCategoryName">
    <option value="">
        Select Category
    </option>
    <option>
        Reusable Components
    </option>
    <option>
        BU Connects
    </option>
</select>

以下是js:

$('#frm_editCategory').validate({
    rules: {
        editCategory_sltbuName: {
            required: true
        },
        editCategory_sltCategoryName: {
            required: true
        },
        editCategory_categoryName: {
            minlength: 2,
            required: true,
            buname: true
        },
        editCategory_categoryDescription: {
            minlength: 2,
            required: true,
            buname: true
        }
    },
    highlight: function(element) {
        $(element).closest('.control-group')
            .removeClass('success').addClass('error');
    },
    success: function(element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group')
            .removeClass('error').addClass('success');
    },
    submitHandler: function(event) {
        return true;
    }
});

我也尝试通过为其编写自定义方法来做到这一点，但这没有用.

I have tried to do it by writing custom method for it also but it is of no use.

推荐答案

我将根据您的描述尽力回答您的问题，因为我相信我也遇到了类似的问题并且能够解决它

I'll do my best to answer your question based on what you've described, because I believe I have encountered a similar issue and been able to resolve it.

首先，我假设您已使用selectpicker()方法正确初始化了select.上面是你写的

First, I'm assuming that you correctly initialized your select with the selectpicker() method. Above, you wrote

$('.selectpicker').selectpicker();

但是您没有类selectpicker的任何select元素，所以我认为您想写的是

But you do not have any select elements with class selectpicker, so I think what you meant to write was

$('select').selectpicker();

调用selectpicker()时，Bootstrap将在select元素之后插入其他元素(div，button，span，ul和li).但请注意，引导程序将hide()原始的select元素. 由于您的select是隐藏的，因此JQuery Validate将在提交表单时忽略对它的验证..这是主要问题.

When you call selectpicker(), Bootstrap will insert additional elements (div, button, span, ul, and li) after your select element. But note that, Bootstrap will then hide() your original select element. Because your select is hidden, JQuery Validate will ignore validation of it when the form is submitted. This is the main issue.

要告诉Jquery Validate 不忽略隐藏的选择输入，您可以执行以下操作...

To tell Jquery Validate not to ignore your hidden select inputs, you can do the following...

// Initialize form validation rules, submit handler, etc.
$('#frm_editCategory').validate({
  .
  .
  .
});

// The default value for $('#frm_editCategory').validate().settings.ignore
// is ':hidden'.  Log this to the console to verify:
console.log($('#frm_editCategory').validate().settings.ignore);

// Set validator to NOT ignore hidden selects
$('#frm_editCategory').validate().settings.ignore = 
  ':not(select:hidden, input:visible, textarea:visible)';

为什么还需要包含input:visible和textarea:visible?以前，设置是忽略所有隐藏的输入.如果仅忽略:not(select:hidden)，则将忽略不是隐藏的select的所有输入.但是，这也是 允许的，因为可见的input[type=text]不是 是隐藏的select.因此，它也将被忽略.我们想要忽略的任何元素:

Why do you also need to include input:visible and textarea:visible? Before, the setting was to ignore all hidden inputs. If you only ignored :not(select:hidden), you would ignore any input which is not a hidden select. This is too permissive, though, because a visible input[type=text] is not a hidden select. So, it also would get ignored. What we want is to ignore any element which:

- is *not* a hidden `select`
- *is* a hidden `input`
- *is* a hidden `textarea`

要使所有内容适合:not选择器，您要忽略以下任何元素:

To fit this all into a :not selector, you want to ignore any element which:

- is *not* a hidden `select`
- is *not* a visible `input`
- is *not* a visible `textarea`

因此...

$('#frm_editCategory').validate().settings.ignore = 
  ':not(select:hidden, input:visible, textarea:visible)';

这篇关于使用Jquery Validate插件验证bootstrap-select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！