3

I have this javascript function in my page. 

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="InfiStallStock"){
            $(".e-stock-saldo-box").hide();
            $(".InfiStall ul li .infistallLocation").attr('required');              
            $(".Delivery ul input:radio").removeAttr('required');
            $(".Delivery ul input:text").removeAttr('required');
            $(".InfiStall").show();
        }
        if($(this).attr("value")=="DeliveryStock"){
            $(".e-stock-saldo-box").hide();
            $(".InfiStall ul li .infistallLocation").removeAttr('required');
            $(".Delivery ul li input:radio").attr('required');
            $(".Delivery ul input:text").attr('required');
            $(".Delivery").show();
        }
    });
});  


            function enableList(element) {
                var select = document.getElementById("select"+element.id.substring(element.id.length-9));
                enableSubmit();
                showUp();                    
                if(element.checked === true){
                    select.disabled = false;
                    checkSelect(select);
                }else{
                    select.disabled = true;
                    select.selectedIndex = 0;
                }
            }
            function checkSelect(element){
                if(!validate_select(element)){
                    element.setCustomValidity("Pilih Jumlah Estock");
                }else{
                    element.setCustomValidity("");
                }
            }

This javascript functioned to check which option select by user. If user choose one option, then another option which has required input will be ignored/removed, and vice versa.

The javascript is working great in validate the form if I submit the form directly with form action like <form action="submit.php"/>.

However, when I change the way to submit it which is now with ajax, the validation is ignored.

Here is the ajax script to submit the form: 

$('#btn_submit').on('click', function(e) {
    e.preventDefault();

    var esquantity = $('.row_selected select').map(function() { return $(this).val(); }).get().join('|');
    var size = $('.row_selected td.size span').map(function() { return $(this).text(); }).get().join('|');

    $.ajax(
    {
        type: "POST",
        url: "../ajax.php",
        data: 'esquantity='+esquantity+ '&size='+ size,
        cache: false,
        success:function(html)
        {
            alert("Succes " + html);
        }
    });

Can anybody help me how to solve this please, so that this form will have some validations even though I submit it with ajax. Thanks!

alisa
  • 259
  • 3
  • 15
  • 1) show the form. 2) where is the form validation 3) use the submit event of the form: `$('#formID').on('submit', function(e) { e.preventDefault(); if (validate(this)) $.ajax()})`. Lastly if you have jQuery, use it in the other functions too – mplungjan Dec 28 '14 at 17:04
  • @mplungjan, thanks for the quick reply, I want to show the form but the form is too long. :( The form validation is in the javascript above. How to connect `if (validate(this))` with my js validation above? Once again, thanks. – alisa Dec 28 '14 at 17:08
  • checkout these two questions [ques 1](http://stackoverflow.com/questions/18863773/submitting-a-form-with-ajax-after-jquery-validation-is-successfull) and [ques 2](http://stackoverflow.com/questions/11469616/jquery-form-validation-before-ajax-submit) – Nikhil Supekar Dec 28 '14 at 17:20
  • Ah. try this http://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-javascript-jquery – mplungjan Dec 28 '14 at 17:22
  • I have tried it all but I can't get the validation working with my form. I am confused. – alisa Dec 28 '14 at 18:13

1 Answers1

0

Try -

Writing this below event on the normal button rather than on the submit button

$('#btn_submit').on('click', function(e) {

Which will then require you not to call the 

e.preventDefault();

in the function and what you can do then is to call the submit() function explicitly in the ajax call's callback area i.e.

success:function(html)
{
    // call submit function explicitly it should validate all your constraints then
}
Rakesh Lamp Stack
  • 490
  • 4
  • 14