jQuery Validate 在 PHP 中无法正常工作

Question

我正在尝试使用 jQuery Validate 验证包含在 PHP 回显语句中的表单的输入字段，但没有任何反应。代码如下：

else {
    echo 
         '<form method="post" class="cmxform" id="cadastraAtividade" action="/?action=cadastrar_ativ_ext&sub_action=gravar_banco">
            <div>
                <label>Nome da Atividade:</label><br />
                <input type="text" size="50" id="nome" name="cac_atividade_nome" value=""/>
             </div>

             <div>
                <label>Data:</label>
                <script>DateInput("cac_atividade_data", true, "YYYY/MM/DD")</script>
            </div>

            <div>
                <label>Início:</label><input id="time1" type="time" name="cac_atividade_inicio" value="" required/>
                <label>Finalização:</label> <input id="time2" type="time" name="cac_atividade_final" value="" required/><br />
            </div>

            <div>
                <label>Descrição:</label><br /><textarea name="cac_atividade_descricao" rows="10" cols="60" minlength=10 required></textarea></div><div>
                <input class="submit" type="submit" id="botao" value="Submit"/>
             </div>
         </form>

         <script src="js/jquery.min.js"></script>
         <script src="js/jquery.validate.js"></script>

         <script>
         $(#"cadastraAtividade").validate(
         {
            rules: {
                nome: {
                    required: true,
                    minlength: 10
                }
            }
        });
         </script>';
}

我只写了一条规则，从那以后我就陷入了困境。另外，我在某处读到，输入字段上的“必需”属性足以让 jQuery 验证工作，但实际上，正在工作的验证（在其他输入字段中）是 HTML5 的验证。

如何让它发挥作用？

Answer 1

我觉得你的选择器不行。

尝试替换这一行：

$(#"cadastraAtividade").validate(

# 在双引号内的这一行：

$("#cadastraAtividade").validate(

$("#cadastraAtividade").validate({
  rules: {
    nome: {
      required: true,
      minlength: 10
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<form method="post" class="cmxform" id="cadastraAtividade" action="/?action=cadastrar_ativ_ext&sub_action=gravar_banco">
  <div>
    <label>Nome da Atividade:</label><br />
    <input type="text" size="50" id="nome" name="cac_atividade_nome" value="" />
  </div>

  <div>
    <label>Data:</label>        
  </div>

  <div>
    <label>Início:</label><input id="time1" type="time" name="cac_atividade_inicio" value="" required/>
    <label>Finalização:</label> <input id="time2" type="time" name="cac_atividade_final" value="" required/><br />
  </div>

  <div>
    <label>Descrição:</label><br /><textarea name="cac_atividade_descricao" rows="10" cols="60" minlength=10 required></textarea></div>
  <div>
    <input class="submit" type="submit" id="botao" value="Submit" />
  </div>
</form>

注意：我已经从 sn-p 中删除了<script>DateInput("cac_atividade_data", true, "YYYY/MM/DD")</script>