jQuery Validate not working properly inside PHP

Question

I'm trying to validade input fields of a form that is contained inside an PHP echo statement using jQuery Validate but nothing happens. Here is the code:

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>';
}

I've only written one rule and I'm stucked since then. Also, I read somewhere that the "required" attirbute on the input fields would be enough to jQuery Validation works, but, in fact, the validation that is working (in the other input fields) is that of HTML5.

How to make it work?

Double-check your jQuery selector syntax. The `#` symbol needs to be ***inside*** the quotation. `$("#cadastraAtividade")` Voting to close: *"This question was caused by a problem that can no longer be reproduced or a **simple typographical error**. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers. This can often be avoided by identifying and closely inspecting the shortest program necessary to reproduce the problem before posting."* — Sparky, Jun 22 '18 at 01:10
I put the # inside the quotation and the validation still doesn't work. On Javascript console this error is shown: jquery.validate.js:428 Uncaught TypeError: $(...).on is not a function at $.validator.init (jquery.validate.js:428) at new $.validator (jquery.validate.js:241) at init.validate (jquery.validate.js:41) at ?action=cadastrar_ativ_ext:46 — Diogo Edwiges, Jun 25 '18 at 13:15

The fourth bird · Answer 1 · 2018-06-21T20:22:44.877

0

I think your selector is not ok.

Try replacing this line:

$(#"cadastraAtividade").validate(

with this line where the # is inside the double quotes:

$("#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>

Note: I have removed <script>DateInput("cac_atividade_data", true, "YYYY/MM/DD")</script> from the snippet

edited Jun 21 '18 at 20:22

answered Jun 21 '18 at 20:14

The fourth bird

154,723
16
55
70

Intentional or not, misplacing the `#` is a simple typographical error, and the question should be closed as off-topic for such. – Sparky Jun 22 '18 at 01:12
I put the # inside the quotation and the validation still doesn't work. On Javascript console this error is shown: `jquery.validate.js:428 Uncaught TypeError: $(...).on is not a function at $.validator.init (jquery.validate.js:428) at new $.validator (jquery.validate.js:241) at init.validate (jquery.validate.js:41) at ?action=cadastrar_ativ_ext:46` I also tried removing the Date script from the form, as you did, but the problem persists. – Diogo Edwiges Jun 25 '18 at 13:38
@DiogoEdwiges Perhaps [this post](https://stackoverflow.com/questions/15670352/typeerror-on-is-not-a-function) or [this post](https://stackoverflow.com/questions/35296900/uncaught-typeerror-on-is-not-a-function/35296956) can help. – The fourth bird Jun 25 '18 at 13:43
1

@Thefourthbird, seeing the posts you pointed I found out that I was using an old version of jQuery that wasn't compatible with last jQuery Validate. I updated jQuery for 3.3.1 version and now it's working! :D Thank you all for answering! – Diogo Edwiges Jun 25 '18 at 15:21

jQuery Validate not working properly inside PHP

1 Answers1