jQuery validate does not work in modal

Asked

Viewed 257 times

0

I have a modal with a form. I used this plugin to create the modal: https://github.com/samdark/the-modal

I also use jquery validate.

It works on all forms of my site. However in the form that is within my modal it does not work.

Does anyone have any idea?

HTML:

        <form id="form-contato" action="enviar.php" method="post">

            <h5>Deixe sua mensagem</h5>

            <input type="hidden" name="field-home">

            <div>
                <label>Nome <span>*</span></label><br>
                <input type="text" name="nome_completo" class="input-full" required="true">
            </div>

            <div>
                <label>E-mail <span>*</span></label><br>
                <input type="email" name="email" class="input-full" required="true">
            </div>

            <div>
                <label>Telefone</label><br>
                <input type="text" name="telefone" class="input-half">
            </div>

            <div>
                <label>Assunto </label><br>
                <input type="text" name="assunto" class="input-full">
            </div>

            <div>
                <label>Mensagem <span>*</span></label>
                <textarea name="mensagem" class="input-textarea" required="true"></textarea>
            </div>

            <button type="submit" class="enviar">
                Enviar <i class="fa fa-paper-plane" aria-hidden="true" style="margin-left: 5px;"></i>
            </button>

<script>
$("#form-contato").validate({
            rules : {
                nome_completo: {
                    required:true
                },
                email: {
                    required:true,
                    email:true
                },
                mensagem: {
                    required:true
                }
            },
            messages:{
                nome_completo: {
                    required: "Campo obrigatório."
                },
                email:{
                    required: "Campo obrigatório.",
                    email: "Informe um e-mail válido."
                },
                mensagem: {
                    required: "Campo obrigatório."
                }
            }
        });
</script>
  • Generates an error in the console? Post a piece of code that is relevant for us to analyze.

  • Does not generate an error in the console. Put HTML and validate jquery.

  • I believe this is happening because you are validating a hidden form, call it $("#form-contato").validate({ after opening the modal.

  • Good morning. I got it. Thank you.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.