Question

我正在使用一些脚本来处理我的selects。此脚本为： jquery.selectbox-0.2

我的结构是：

<select name="dpto_contato" id="dpto_contato" tabindex="1">
    <option value="">Selecione o Departamento</option>
    <option value="Administração">Administração</option>
    <option value="Financeiro">Financeiro</option>
    <option value="Vendas">Vendas</option>
</select>

但是使用这个插件，这个标记收到display：none，然后出现另一个“div”，取而代之，我的“选择框”就这样出现了：

<div id="sbHolder_36001521" class="sbHolder" tabindex="1">
    <a id="sbToggle_36001521" class="sbToggle" href="#"></a>
    <a id="sbSelector_36001521" class="sbSelector" href="#">Selecione o Departamento</a>
    <ul id="sbOptions_36001521" class="sbOptions" style="display: none;">
        <li>
            <a class="sbFocus" href="#" rel="">Selecione o Departamento</a>
        </li>
        <li>
            <a href="#Administração" rel="Administração">Administração</a>
        </li>
        <li>
            <a href="#Financeiro" rel="Financeiro">Financeiro</a>
        </li>
        <li>
            <a href="#Vendas" rel="Vendas">Vendas</a>
        </li>
    </ul>
</div>

我正在使用jQuery，Validator：

$("#form_contato").validate({
    rules: {  
        dpto_contato: { required: true },
        nome: { required: true, minlength: 2 }, 
        email: { required: true, email: true },
        telefone: { required: true },
        assunto: { required: true },
        mensagem: { required: true }
    },  
    messages: {
        dpto_contato: { required: 'Selecione o Departamento'},
        nome: {  required: 'Informe o seu nome', minlength: 'No mínimo 2 letras' }, 
        email: { required: 'Informe o seu Email', email: 'Informe um Email válido' },
        telefone: { required: 'Informe seu Telefone'},
        assunto: { required: 'Informe o Assunto'},
        mensagem: { required: 'Escreba sua Mensagem'},

    }, 

    showErrors: function(errorMap, errorList) {
        $("#form_contato").find("input").each(function() {
            $(this).removeClass("error");
        });
        $("#myErrorContainer").html("");
        if(errorList.length) {
            $("#myErrorContainer").html(errorList[0]['message']);
            $(errorList[0]['element']).addClass("error");
        }
    },
    submitHandler: function( form ){
        $("#myErrorContainer").hide();
        $("#enviando").show();
        var dados = $( form ).serialize();  
        $.ajax({  
            type: "POST",  
            url: "PAGINADEENVIO.PHP",
            data: dados,  
            success: function( data )  
            {  
                alert('Email enviado com sucesso!. Em breve entraremos em contato');
                $("#form_contato")[0].reset();
                $("#enviando").hide();

            }  
        });  

        return false;  
    }           
});

所以我的问题是：如何在此选择中应用验证？

Answer 1

默认情况下，jQuery Validate会忽略所有隐藏的输入元素。

要使用jQuery Validate插件验证隐藏元素，必须将ignore选项设置为[]，以禁用此默认行为。

$("#form_contato").validate({
    ignore: [],
    rules: {
        ...

另见：https://stackoverflow.com/a/8565769/594235

自定义字段上的jQuery Form Validator

1 个答案: