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

问题描述

我在使用 jquery validate 插件验证使用 bootstrap-select.js 插件美化的选择时遇到问题.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的选择.

for beautifying select of html.

但是，它会导致使用 jquery validate 插件进行验证时出现问题.除非和直到类 selectpicker 未删除，否则根本不会验证 select.删除类后，将正确执行验证.以下是我的选择 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();

但是你没有任何 select 元素与类 selectpicker，所以我认为你的意思是写的是

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

$('select').selectpicker();

当你调用 selectpicker() 时，Bootstrap 会插入额外的元素(div、button、span、ul 和 li) 在您的 select 元素之后.但请注意，Bootstrap 将随后 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)，您将忽略任何 not 隐藏 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屋！