6

Tenho três campos, dois inputs text e entre eles um select. Se um dos dois primeiros for preenchido o outro se torna obrigatório. O problema é que quando um único determinado valor, no caso a última opção, do select for preenchido os três passam a ser obrigatórios.

É possível termos regras dinâmicas com este plugin, ou seja, ao verificar o valor do select tornar o terceiro campo obrigatório?

HTML

<div id="msgErros"></div>
<form>
    <label for="tempoInicial">Tempo Inicial</label>
    <input type="text" name="filtro.tempoInicial" size="8" value="" id="tempoInicial" class="tempo" />
    <br />
    <label for="operadorTempo">Operador de Tempo</label>
    <select name="filtro.valorOperadorTempo" id="operadorTempo" class="tempo">
        <option value="">-- Selecione --</option>
        <option value="1">&gt; - Maior</option>
        <option value="2">&lt; - Menor</option>
        <option value="3">Entre</option>
    </select>
    <br />
    <label for="tempoFinal">Tempo Final</label>
    <input type="text" name="filtro.tempoFinal" size="8" value="" id="tempoFinal" />
    <br />
    <button>Enviar</button>
</form>

JavaScript

$.validator.addMethod("skip_or_fill_minimum", function (value, element, options) {
    var $fields = $(options[1], element.form),
        $fieldsFirst = $fields.eq(0),
        validator = $fieldsFirst.data("valid_skip") ? $fieldsFirst.data("valid_skip") : $.extend({}, this),
        numberFilled = $fields.filter(function () {
            return validator.elementValue(this);
        }).length,
        isValid = numberFilled === 0 || numberFilled >= options[0];

    // Store the cloned validator for future validation
    $fieldsFirst.data("valid_skip", validator);

    // If element isn't being validated, run each skip_or_fill_minimum field's validation rules
    if (!$(element).data("being_validated")) {
        $fields.data("being_validated", true);
        $fields.each(function () {
            validator.element(this);
        });
        $fields.data("being_validated", false);
    }
    return isValid;
}, jQuery.validator.format("Please either skip these fields or fill at least {0} of them."));

$("form").validate({
    errorContainer: "#msgErros ul",
    errorLabelContainer: "#msgErros",
    wrapper: "li",
    rules: {
        "filtro.tempoInicial": {
            skip_or_fill_minimum: [2, ".tempo"]
        },
            "filtro.valorOperadorTempo": {
            skip_or_fill_minimum: [2, ".tempo"]
        }
    },
    groups: {
        tempos: "filtro.tempoInicial filtro.valorOperadorTempo"
    },
    onfocusout: function (element, event) {
        var classeCSSElemento = $(element).attr("class");
        var classeCSSElementoIndefinida = typeof classeCSSElemento === "undefined";
        if (classeCSSElementoIndefinida || (!classeCSSElementoIndefinida && !classeCSSElemento.contains("tempo"))) {
            $.validator.defaults.onfocusout.call(this, element, event);
        }
    }
});

Fiddle

2 Respostas 2

1

É possível adicionar e remover regras de validação dinamicamente, como o indicado por esta resposta no SOEN: https://stackoverflow.com/a/4878858/195417

Estou com acesso limitado no momento para internet, por favor verifique se isso resolve o seu problema... não consigo ver a documentação para ter certeza.

6
  • Exatamente o que eu precisava, obrigado! 24/02/2014 às 17:43
  • Uma última pergunta, você sabe como colocar este input a um grupo e retirá-lo dinamicamente? 24/02/2014 às 17:55
  • @PhilippeGioseffi: pelo que pude ver na documentação e no SOEN não tem como alterar o grupo dinamicamente. Estou com acesso limitado, (sem google, e alguns outros sites), então fica meio complicado. =\ 24/02/2014 às 18:26
  • Alguém fez besteira no setor de Infra daqui! hehe 24/02/2014 às 18:27
  • Bom, então deixarei o grupo fixo com os três campos, vou deixar agora apenas as mensagens dinâmicas, obrigado mais uma vez pela ajuda. 24/02/2014 às 18:29
1

É possível fazer essa lógica de forma muita mais simples. Basta adicionar as seguintes regras:

rules: {
    "filtro.tempoInicial": {
        required: function(element) {
            return $("#operadorTempo").val() == 3
                   || $('#tempoFinal').val() == '';
      }
    },
    "filtro.valorOperadorTempo": {
        required: true
    },
    "filtro.tempoFinal": {
        required: function(element) {
            return $("#operadorTempo").val() == 3 
                   || $('#tempoInicial').val() == '';
        }
    }
},

Você não precisa daquele validador adicional.

Demo funcional no Jsfiddle

4
  • Para essa realidade específica realmente funciona, porém fui orientado a sempre colocar nas minhas perguntas apenas o problema que estou tendo, pois normalmente ninguém lê longos HTMLs ou Scripts, com isso dito, explico-lhe que sua solução não resolve meu problema, pois tenho mais campos e mais regras neste formulário, mas pelo teste que fiz atendeu perfeitamente se fossem somente esses. 24/02/2014 às 18:05
  • Na verdade, se você editar sua segunda regra de true para function(element) { return $('#tempoInicial').val() == ''; } acho que funcionaria para o meu caso. 24/02/2014 às 18:09
  • @PhilippeGioseffi Se o usuário puder deixar todos os campos em branco, isso resolve.
    – utluiz
    24/02/2014 às 18:26
  • A alteração que fiz no segundo comentário já resolveria meu problema. Obrigado pela ajuda de qualquer forma! 24/02/2014 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .