My ajax form does not validate

Asked

Viewed 233 times

1

I’m trying to validate a form by ajax and it’s not working.

Page ajax is like this: http://pastebin.com/t5it0n4T

 jQuery('#enviar-contato').click(function(){        
    var _name = jQuery('#name').val();
    var _email = jQuery('#email').val();
    var _assunto = jQuery('#assunto').val();
    var _message = jQuery('#message').val();

    /* construindo url */

    var urlData = {
     "name"    : _name,
     "email"   : _email,
     "assunto" : _assunto,
     "message" : _message
   };

   jQuery.ajax({
    type: "post",
    url: "formcontato.php",
    data: urlData,          
    success: function( resultado )
    {
      console.log(resultado);
    }
  });
});

Contact page: http://pastebin.com/44raVzk6

<form action="javascript:void(0);">
    <div class="row">
        <div class="col-sm-12 box-contact-send" style="display: none;">
            <div class="form-group">
                <p class="form-control border-green">Sua mensagem foi enviada com sucesso. Obrigado.</p>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="name" class="sr-only">Nome</label>
                <span class="icon-user"><input type="text" class="form-control" name="name" id="name" placeholder="Nome" required></span>
            </div>
            <div class="form-group">
                <label for="email" class="sr-only">Email</label>
                <span class="icon-mail"><input type="email" class="form-control" name="email" id="email" placeholder="Email" required></span>
            </div>
            <div class="form-group">
                <label for="subject" class="sr-only">Assunto</label>
                <!-- <input type="text" class="form-control subject" id="subject" placeholder="Assunto" required> -->
                <select class="form-control subject" name="assunto" id="assunto" required>
                    <option value="Dúvidas">Dúvidas</option>
                    <option value="Orçamento">Orçamento</option>
                    <option value="Parcerias">Parcerias</option>
                    <option value="Sugestões">Sugestões</option>
                </select>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="message" class="sr-only">Mensagem</label>
                <textarea class="form-control message" name="message" id="message" placeholder="Mensagem" required></textarea>
            </div>
        </div>
    </div>
    <input type="submit" id="enviar-contato" class="btn btn-form btn-cta-primary" value="Enviar Mensagem">
</form>

Does anyone know why not validating you?

Note: I put required which is a validation in HTML5 and even that doesn’t work.

html5 ajax
  • 1

    Here it is normal: https://jsfiddle.net/felipe_douradinho/qw2z6k1j/

  • Have you added jQuery on the page? where on the page are you running that code? before or after the form?

  • There is, look there complete with the jquery at the end. http://pastebin.com/wnfkcapD

  • Welcome to Stackoverflow, use the button Comentar to add comments to your questions or answers, use the button edit to edit your question and add more information. The button Responder is unique to answers. Make a tour by the site, to know more.

  • @user27508 you declared the document type at the beginning of the file <!DOCTYPE html>?

1 answer

1

Instead of putting the event on input type="submit" treat the submit form, so that the Html5 validations function correctly.

$("form").submit(function(e) {
  e.preventDefault();
   var _name = jQuery('#name').val();
    var _email = jQuery('#email').val();
    var _assunto = jQuery('#assunto').val();
    var _message = jQuery('#message').val();

    /* construindo url */

    var urlData = {
     "name"    : _name,
     "email"   : _email,
     "assunto" : _assunto,
     "message" : _message
   };

   jQuery.ajax({
    type: "post",
    url: "formcontato.php",
    data: urlData,          
    success: function( resultado )
    {
      console.log(resultado);
    }
  });
});
<form>
    <div class="row">
        <div class="col-sm-12 box-contact-send" style="display: none;">
            <div class="form-group">
                <p class="form-control border-green">Sua mensagem foi enviada com sucesso. Obrigado.</p>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="name" class="sr-only">Nome</label>
                <span class="icon-user"><input type="text" class="form-control" name="name" id="name" placeholder="Nome" required></span>
            </div>
            <div class="form-group">
                <label for="email" class="sr-only">Email</label>
                <span class="icon-mail"><input type="email" class="form-control" name="email" id="email" placeholder="Email" required></span>
            </div>
            <div class="form-group">
                <label for="subject" class="sr-only">Assunto</label>
                <!-- <input type="text" class="form-control subject" id="subject" placeholder="Assunto" required> -->
                <select class="form-control subject" name="assunto" id="assunto" required>
                    <option value="Dúvidas">Dúvidas</option>
                    <option value="Orçamento">Orçamento</option>
                    <option value="Parcerias">Parcerias</option>
                    <option value="Sugestões">Sugestões</option>
                </select>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="message" class="sr-only">Mensagem</label>
                <textarea class="form-control message" name="message" id="message" placeholder="Mensagem" required></textarea>
            </div>
        </div>
    </div>
    <input type="submit" id="enviar-contato" class="btn btn-form btn-cta-primary" value="Enviar Mensagem">
</form>

You can still "serialize" (serialize()) form without the need to create the object urlData in hand, the serialize() creates a json object with the attribute name and the value of the form fields;

$("form").submit(function(e) {
  e.preventDefault();
  var urlData = $(this).serialize();
   $.ajax({
    type: "post",
    url: "formcontato.php",
    data: urlData,          
    success: function(resultado)
    {
      console.log(resultado);
    }
  });
});

Browser other questions tagged html5 ajax

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