Submit form with html5 validation and jquery ajax

Question

I have a problem with validation of my form because if I use required attribute in each element of form and press submit the form is not processed until it is fill out the form, but in my file I add a function functions.js click on the button to send the data form, html5 validation is no longer respected and would like to know why that happens.

Without jquery event

Form

<form class="user-form" method="post">
<p><i>Todos los campos son requeridos!</i></p>
<p> 
    <input id="uName" class="span5" name="uName" type="text" placeholder="Nombre completo" required/>
</p>
<p> 
    <input id="uEmail" class="span5" name="uEmail" type="email" placeholder="E-mail" required/>
</p>
<p> 
    <input id="uUser" class="span5" name="uUser" type="text" placeholder="Usuario" required/>
</p>
<p> 
    <input id="uPasswd" class="span5" name="uPasswd" type="password" placeholder="Contraseña" required/>
</p>
<p> 
    <select id="uType" class="span5" name="uType" required>
        <option value="0">Tipo de usuario</value>
        <option value="1">Emisor</value>
        <option value="2">Revisor</value>
    </select>
</p>
<p>
    <input class="saveUser btn btn-primary" type="submit" value="Guardar"/>
</p>
</form>

jQuery event

$('.saveUser').on('click',function() {
data = $('.user-form').serializeArray();

data.push({
    name: 'tag',
    value: 'saveUser'
})

console.log(data);
return false;
    /* I put the above code for check data before send to ajax*/
$.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function (data) {
            if (data.success) {

            } else {

            }
        }
});
return false;
})

Then, if I use jquery event to send data with ajax html5 validation with "required" attribute does't work.

If I change on click .save-user to on submit form, works html5 validation but not the code inside jquery event.

Additional info

The above form is used and included in two sections

<a href="#" id="lSignup">Sign-up Free</a>
<section id="sign-up">
    /* Form */
</section>
<a href="#" id="lEdit">Edit information</a>
<section id="edit-user">
    /* Form */
</section>

Then when I click in lSignup add an id to user-form:

$('#lSignUp').on('click', function() { $('.user-form').attr('id','save-user'); })

And if I click in lEdit..

$('#lEdit').on('click', function() { $('.user-form').attr('id','edit-user'); })

And after add ID to user-form, that form is showed to fill or edit field and save data with the event jquery to put up.

Answer 1

$(document).on('submit','#save-user',function(e) {
  e.preventDefault();
  data = $(this).serializeArray();

  data.push({
    name: 'tag',
    value: 'saveUser'
  })

  console.log(data);

    /* I put the above code for check data before send to ajax*/
    $.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function (data) {
            if (data.success) {

            } else {

            }
        }
   });
return false;
})