My ajax form is not valid

Navigation
1

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

ajax page looks like this: link 

 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: link 

<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 you are not validating?

Note: I have placed a required HTML5 validation and it does not even work.

    
asked by anonymous 10.07.2015 / 06:22

1 answer

1

Instead of putting the event in input type="submit" , treat the submit of the form, so that html5 validations work 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() ) of the form without having to create the urlData object at hand , serialize() creates a json object with the name attribute 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);
    }
  });
});
    
10.07.2015 / 22:45
Problem with a field in RegEX Library for issuing electronic invoices [closed]