current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
    
you can do that using onSubmit event. in that function use you $.ajax code and return false (this will prevent form submit). –  Strik3r May 23 '13 at 18:25
    
The browser checks the required stuff when you do the form submit. Your code bypasses that. It means you would have to do your own jQuery checking based on the attributes. –  Lee Meador May 23 '13 at 18:26
    
If I use $('.user-form').on('submit', function() {...... works fine, but I need use $('#save-user').on('submit', function(){ .. when the user needs register or $('#edit-user').on('submit', function(){ .. when the user needs edit your info but if I use IDs instead class of form, doesn't work. –  SoldierCorp May 23 '13 at 18:28

1 Answer 1

up vote 1 down vote accepted 
$(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;
})
share|improve this answer
    
If I use $('.user-form').on('submit', function() {...... works fine, but I need use $('#save-user').on('submit', function(){ .. when the user needs register or $('#edit-user').on('submit', function(){ .. when the user needs edit your info but if use IDs instead class of form, doesn't work –  SoldierCorp May 23 '13 at 18:32
    
use $(document).on('submit','selector',function(){...}) bcz binding event dynamically. –  Strik3r May 23 '13 at 18:37
    
Yes, works fine! Thanks a lot :) –  SoldierCorp May 23 '13 at 18:37
1  
I think an explanation about the suggested code would be needed to have a quality answer. –  David Oct 6 '13 at 18:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.