如何验证使用jQuery Validate动态添加的类

时间:2016-09-16 20:12:47

标签: javascript jquery arrays jquery-validate

我有一个表单,显示从数据库中检索的项目列表。他们每个人都有一定程度的“强度”。

因此,用户必须在复选框中标记所选项目,并且对于每个所选项目,他必须选择一定程度的强度。

了解它的外观:http://prntscr.com/citz8y

问题是:验证它是一场噩梦。我必须使用foreach注册所有这些,这意味着所有单选按钮共享相同的名称。我需要做的是:当用户标记一个项目时,只需要该项目的单选按钮 - 其余按钮将保持原样。

我已经尝试在用类标记收音机的复选框上放置一个函数,因此jQuery将知道要验证的内容。在必要的地方成功添加该类。但是,验证失败。

请参阅我的代码:

jQuery验证:

$('.manter-em.marcado').each(function() {
    $(this).rules('add', {
        required: true,
        messages: {
            required:  'Marque o grau de agravamento a ser mantido'
        }
    });
});

添加课程的功能:

function marcaRadios(elem)
{

    if($(elem).is(':checked'))
    {

        $(elem).parent().parent().parent().find('.form-group.required input').addClass('marcado');
    }
    else
    {
        $(elem).parent().parent().parent().removeClass('marcado');
    }
}

形式:

<form name="frm_cadastrar" action="sugerir_resultados.php?acao=<?=codificaURL("inserir")?>&id=<?=codificaURL($id)?>" method="post">
    <?php       
    while($linhas = mysqli_fetch_array($q)){
    ?>
    <fieldset class="drop-list">
        <legend><?=$linhas["titulo"]?> <span class="caret"></span></legend>
        <div class="dropdown-list">
            <?php
            $q1 = mysqli_query($con, "select r.id as id_resultado, r.titulo, s.id, r.idade_minima, r.idade_maxima, r.unidade from resultados r, solucoes s where r.id = s.codresultado AND s.coddiagnostico = ".$linhas["id"]);
            while($resultados = mysqli_fetch_array($q1)):

            if(!empty($resultados["unidade"])){
                $idade = 0; $idade_minima = 0; $idade_maxima = 0;
                $idade_minima = $resultados["idade_minima"];
                $idade_maxima = $resultados["idade_maxima"];

                if($resultados["unidade"]=="A")
                {
                        $idade_minima = $resultados["idade_minima"]*12;
                        if(!empty($idade_maxima))
                        {
                            $idade_maxima = $resultados["idade_maxima"]*12;
                        }
                }

                $q2 = mysqli_query($con, "select idade, unidade from criancas c, consultas cs where c.id = cs.codcrianca AND cs.id = $id");
                if($linhas = mysqli_fetch_array($q2))
                {
                    $idade = $linhas["idade"];

                    if($linhas["unidade"]=="A")
                    {
                        $idade = $idade*12;
                    }

                    if(!empty($idade_maxima))
                    {
                        if($idade>=$idade_minima && $idade<=$idade_maxima)
                        {
                        ?>
                        <div class="opcao-resultado">
                            <div class="checkbox">
                                <label>
                                    <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="<?=$resultados["id"]?>">
                                    <a href='exibir_resultado.php?id=<?=codificaURL($resultados["id_resultado"])?>'>
                                        <?=$resultados["titulo"]?>
                                    </a>
                                </label>
                            </div>
                            <hr class="hr-checkbox">
                            <div class="form-group required">
                                <label for="<?="manter_em".$resultados["id"]?>">Manter em&nbsp;</label>                                    
                                <input type="radio" name="<?="manter_em".$resultados["id"]?>" id="<?="manter_em".$resultados["id"]?>" class="manter-em" value="1"> 1 (Gravemente comprometido)
                                <input type="radio" name="<?="manter_em".$resultados["id"]?>" class="manter-em" value="2"> 2 (Muito comprometido)
                                <input type="radio" name="<?="manter_em".$resultados["id"]?>" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                            </div>
                            <div class="form-group required"> 
                                <label for="<?="aumentar_para".$resultados["id"]?>">Aumentar para&nbsp;</label>                                    
                                <input type="radio" name="<?="aumentar_para".$resultados["id"]?>" id="<?="aumentar_para".$resultados["id"]?>" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                                <input type="radio" name="<?="aumentar_para".$resultados["id"]?>" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                            </div>
                        </div>
                        <br>
                        <?php
                        }
                    }
                    else
                    {
                        if($idade==$idade_minima){
                        ?>
                        <div class="opcao-resultado">
                            <div class="checkbox">
                                <label>
                                    <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="<?=$resultados["id"]?>">
                                    <a href='exibir_resultado.php?id=<?=codificaURL($resultados["id_resultado"])?>'>
                                        <?=$resultados["titulo"]?>
                                    </a>
                                </label>
                            </div>
                            <hr class="hr-checkbox">
                            <div class="form-group required">
                                <label for="<?="manter_em".$resultados["id"]?>">Manter em&nbsp;</label>                                    
                                <input type="radio" name="<?="manter_em".$resultados["id"]?>" id="<?="manter_em".$resultados["id"]?>" class="manter-em" value="1"> 1 (Gravemente comprometido)
                                <input type="radio" name="<?="manter_em".$resultados["id"]?>" class="manter-em" value="2"> 2 (Muito comprometido)
                                <input type="radio" name="<?="manter_em".$resultados["id"]?>" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                            </div>
                            <div class="form-group required"> 
                                <label for="<?="aumentar_para".$resultados["id"]?>">Aumentar para&nbsp;</label>                                    
                                <input type="radio" name="<?="aumentar_para".$resultados["id"]?>" id="<?="aumentar_para".$resultados["id"]?>" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                                <input type="radio" name="<?="aumentar_para".$resultados["id"]?>" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                            </div>
                        </div>
                        <br>
                    <?php
                        }
                    }
                }
            }
            else
            {?>
                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="<?=$resultados["id"]?>">
                            <a href='exibir_resultado.php?id=<?=codificaURL($resultados["id_resultado"])?>'>
                                <?=$resultados["titulo"]?>
                            </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="<?="manter_em".$resultados["id"]?>">Manter em&nbsp;</label>                                    
                        <input type="radio" name="<?="manter_em".$resultados["id"]?>" id="<?="manter_em".$resultados["id"]?>" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="<?="manter_em".$resultados["id"]?>" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="<?="manter_em".$resultados["id"]?>" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="<?="aumentar_para".$resultados["id"]?>">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="<?="aumentar_para".$resultados["id"]?>" id="<?="aumentar_para".$resultados["id"]?>" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="<?="aumentar_para".$resultados["id"]?>" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
            <?php
            }

            endwhile;
            ?>
        </div>
    </fieldset>
    <?php }?>
    <button type="submit" name="enviar" class="btn btn-primary btn-lg active acao">
        <span class="glyphicon glyphicon-check"></span> 
        Salvar
    </button>
    <button type="reset" name="limpar" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-erase"></span> 
        Limpar
    </button>
</form>

在浏览器中呈现的HTML:

 <form name="frm_cadastrar" action="sugerir_resultados.php?acao=aW5zZXJpcg,,&id=MTg," method="post">
            <fieldset class="drop-list">
        <legend>Risco de integridade da pele prejudicada <span class="caret"></span></legend>
        <div class="dropdown-list">
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="232">
                            <a href='exibir_resultado.php?id=MTAwNA,,'>
                                Estado Nutricional                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em232">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em232" id="manter_em232" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em232" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em232" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para232">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para232" id="aumentar_para232" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para232" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="233">
                            <a href='exibir_resultado.php?id=MTEwMQ,,'>
                                Integridade Tissular: Pele e Mucosa                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em233">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em233" id="manter_em233" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em233" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em233" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para233">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para233" id="aumentar_para233" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para233" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="234">
                            <a href='exibir_resultado.php?id=MTEwMg,,'>
                                Cicatrização de Feridas: primeira intenção                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em234">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em234" id="manter_em234" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em234" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em234" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para234">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para234" id="aumentar_para234" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para234" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="235">
                            <a href='exibir_resultado.php?id=MTEwMw,,'>
                                Cicatrização de Feridas: segunda intenção                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em235">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em235" id="manter_em235" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em235" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em235" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para235">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para235" id="aumentar_para235" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para235" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="236">
                            <a href='exibir_resultado.php?id=MTEwNg,,'>
                                Cicatrização de Queimaduras                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em236">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em236" id="manter_em236" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em236" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em236" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para236">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para236" id="aumentar_para236" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para236" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="237">
                            <a href='exibir_resultado.php?id=MTEwNw,,'>
                                Recuperação de Queimaduras                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em237">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em237" id="manter_em237" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em237" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em237" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para237">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para237" id="aumentar_para237" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para237" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="238">
                            <a href='exibir_resultado.php?id=MTkyMg,,'>
                                Controle de Riscos: hipertermia                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em238">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em238" id="manter_em238" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em238" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em238" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para238">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para238" id="aumentar_para238" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para238" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="239">
                            <a href='exibir_resultado.php?id=MTkyMw,,'>
                                Controle de Riscos: hipotermia                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em239">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em239" id="manter_em239" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em239" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em239" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para239">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para239" id="aumentar_para239" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para239" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                                <div class="opcao-resultado">
                    <div class="checkbox">
                        <label>
                            <input type='checkbox' name='solucoes[]' onclick="marcaRadios(this)" value="240">
                            <a href='exibir_resultado.php?id=MTkyNA,,'>
                                Controle de Riscos: Processo Infeccioso                                </a>
                        </label>
                    </div>
                    <hr class="hr-checkbox">
                    <div class="form-group required">
                        <label for="manter_em240">Manter em&nbsp;</label>                                    
                        <input type="radio" name="manter_em240" id="manter_em240" class="manter-em" value="1"> 1 (Gravemente comprometido)
                        <input type="radio" name="manter_em240" class="manter-em" value="2"> 2 (Muito comprometido)
                        <input type="radio" name="manter_em240" class="manter-em" value="3"> 3 (Moderadamente comprometido)
                    </div>
                    <div class="form-group required"> 
                        <label for="aumentar_para240">Aumentar para&nbsp;</label>                                    
                        <input type="radio" name="aumentar_para240" id="aumentar_para240" class="aumentar-para" value="4"> 4 (Levemente comprometido)
                        <input type="radio" name="aumentar_para240" class="aumentar-para" value="5"> 5 (N&atilde;o comprometido)
                    </div>
                </div>
                <br>
                        </div>
    </fieldset>
            <button type="submit" name="enviar" class="btn btn-primary btn-lg active acao">
        <span class="glyphicon glyphicon-check"></span> 
        Salvar
    </button>
    <button type="reset" name="limpar" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-erase"></span> 
        Limpar
    </button>
</form>

在用户标记复选框后呈现的HTML: link

你能告诉我一些事吗? 提前致谢

0 个答案:

没有答案