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

enter image description here

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.

claustrofob · Accepted Answer · 2013-05-23 08:15:04Z

2

Instead of

$('.saveUser').on('click',function() {

Use

$('.user-form').on('submit',function(e) {
    e.preventDefault();

answered May 23, 2013 at 8:15

claustrofob

5,0042 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SoldierCorp Over a year ago

I'm sorry but doesn't work, when click in submit of form don't processed info inside event jquery (serialize, consolo.log, return false..)

SoldierCorp Over a year ago

Works if use $('.user-form... but that form is used in two sections of my app.. then when click in a link, an ID (#save-user)is added to form then I do this $('#save-user').on('submit',function(e) { e.preventDefault(); } but with this instruction doesn't work.. any idea?

claustrofob Over a year ago

Do you have 2 forms on your page? Do you change the ID in runtime? What link do you click? Please, update your question. It is not clear for now.

Faishal · Accepted Answer · 2013-05-23 18:39:14Z

0

$(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;
})

answered May 23, 2013 at 18:39

Faishal

1,4931 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Html5 validation and jquery ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related