Adicionando jQuery condicional validação para HTML gerado dinamicamente

Question

Eu tenho o seguinte cenário HTML:

<div>
    <input id="txt0" type="text" /><input type="checkbox" id="chk0" /></div>
<div>
    <input id="txt1" type="text" /><input type="checkbox" id="chk1" /></div>
<!-- etc -->
<div>
    <input id="txtN" type="text" /><input type="checkbox" id="chkN" /></div>

Se checkbox N é verificado, em seguida, caixa de texto N é um campo obrigatório.

Eu apenas comecei a trabalhar com um (a?) jQuery validação módulo e am tentando descobrir como conseguir essa validação, que parece apenas um pouco mais complexo do que os exemplos.

Conceitualmente eu acho que eu quero adicionar uma classe CSS para os meus caixas de seleção, em seguida, usar addClassRules para adicionar uma regra personalizada. No entanto, o desafio é como especificar a caixa de texto relevante para cada opção.

O meu HTML é gerada utilizando ASP.NET MVC, para que eu pudesse gerar dinamicamente o JavaScript que deve especificar uma regra para cada caixa, mas isso parece um pouco prolixo.

Answer 1

resolvido, usando a seguinte abordagem ...

Eu atualizei meu HTML para incluir uma classe específica CSS para minhas caixas de texto (amount_text_box), e usado o seguinte jQuery:

$.validator.addClassRules("amount_text_box", { required: function(element) {
    var chkId = element.id.replace(/txt/, "#chk");
    return $(chkId)[0].checked;
}

Uma limitação é que este só é acionado quando as folhas de foco a caixa de texto - idealmente a regra também fogo quando a caixa foi clicado

.

Answer 2

Eu fiz uma coisa semelhante, Richard. Embora eu stoppped aquém da regra personalizada. Minha abordagem foi a de adicionar a classe 'necessária' para a marca de entrada.

Em termos de seu seletor, você não poderia ter sua caixa de texto e de entrada "share" uma classe única de eles dizerem class0 .. classN e seleccionar uma entrada dentro dessa classe?

Bondade,

Dan