CODEWITHSUNDEEP
jqueryajaxonsubmit
user3264050
user3264050

Reputation:

Send form via AJAX but only after validation returns true

I have an onsubmit validation in my form which works, yet my ajax file is still making a http request.

Here's the form:

<form class="ajax" action="mecha.php" name="ajax" method="post" onsubmit="return answer_validate(document.forms.ajax);">
    <input type="text" name="user_answer">
    <input type="submit" class="submit">
</form>

Here's the validation function that is triggered onsubmit:

function answer_validate(f) { 

    if (f.user_answer.value.length > 23 || f.user_answer.value.length < 1) {

        document.getElementById("notice").innerHTML = "please input an answer";

    return false; 
    }

return true;
}

Finally here's the AJAX file that is sending the form (even if the validation function returns false, which is the problem!):

$('form.ajax').on('submit', function() {

var that = $(this),
url  = that.attr('action'),
type = that.attr('method'),
data = {};

that.find('[name]').each(function(index, value) {
    var that  = $(this),
        name  = that.attr('name'),
        value = that.val();
        data[name] = value;
});

$.ajax({
    url : url,
    type: type,
    data: data,
    success: function(response) {
        $('.output').html(response);
    }

});

return false;
});

So in summary, the form is validated with a function that returns either true or false. On submission the AJAX is still sending the form even when the validation returns false. Why is the AJAX still sending the form no matter what?

I have tried this example without sending the form via AJAX and the onsubmit works as normal, (halting form submission until validation returns true).

So what am I missing?

Upvotes: 1

Views: 2280

Answers (2)

Girish
Girish

Reputation: 12127

you should call answer_validate() function inside $('form.ajax').on('submit', ....) section.. inside jQuery submit event same form submit event also using, see below

$('form.ajax').on('submit', function(e) {

if(!answer_validate(this)){
    e.preventDefault(); 
    return false;
}

/*ajax part*/

})

Updated answer ok, add e.preventDefault(); outside if condition.. see below,

$('form.ajax').on('submit', function(e) {
  e.preventDefault();     
  if(!answer_validate(this)){
    return false;
  }

  /*ajax part*/

})

and use this condition if($.trim(f.user_answer.value).length > 23 || $.trim(f.user_answer.value).length == 1)

function answer_validate(f) { 
    if ($.trim(f.user_answer.value).length > 23 || 
        $.trim(f.user_answer.value) == "") {

        document.getElementById("notice").innerHTML = "please input an answer";
    return false; 
    }
return true;
}

PS: use $.trim() function to remove white space

Upvotes: 1

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

function answer_validate(f) { 

    if (f.user_answer.value.length > 23 || f.user_answer.value.length < 1) {

        document.getElementById("notice").innerHTML = "please input an answer";

    f.preventDefault(); 
    }
}

This could be enough, i believe return false is deprecated... if this doesn't work you could also check it in the on submit event handler 

    $('form.ajax').on('submit', function(event) {

    if (event.user_answer.value.length > 23 || event.user_answer.value.length < 1) {

        document.getElementById("notice").innerHTML = "please input an answer";

    event.preventDefault(); 
    }else {
    var that = $(this),
    url  = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {
        var that  = $(this),
            name  = that.attr('name'),
            value = that.val();
            data[name] = value;
    });

    $.ajax({
        url : url,
        type: type,
        data: data,
        success: function(response) {
            $('.output').html(response);
        }

    });

}
    });

Upvotes: 0

Related Questions