javascript - AJAX之前preventDefault，表单仍然提交成功

Question

我正在尝试制作一个表单，要求在提交之前满足某些条件。这里遇到了一些 ajax 问题..

 $('form').submit(function(event){
     form = $(this); // I've tried just: this. Same result
     material = $('#material'). val();
     hours = $('#hours'). val();

     // - Material and Hours are numbers
     if(isNaN(material)) {
         event.preventDefault();
         alert('Please enter a number for Material');
     }
     if(isNaN(hours)) {
         event.preventDefault();
         alert('Please enter a number for Hours');
     }


     event.preventDefault();
     $.ajax({
         url : 'page.php',
         data : {
             'id' : {{ id }}
         },
         type : 'post',
         dataType: "json",
         success : function(data){
            console.log(data);
            if(data.job_num == {{ job_id }}) {
                form.submit();
            } else {
                alert('Please enter a valid number');
            }
        },
        error: function(){
            alert('Please enter a valid number');                    
        }
    });

});

如您所见，hours 可能是 NaN 并且表单不会提交。但是当它到达 ajax 时并且如果成功，表单将即使 hours 仍然是 NaN 也提交..

我尝试将 ajax 放在 if 语句之前，结果相同。不确定这是否是我忽略的简单内容，或者是否真的这么复杂。

Answer 1

在发生 alert() 错误后放置一个 return; ，无论如何它都会结束事件函数。

event.preventDefault() 将阻止 form 提交，而不是执行其余函数，这就是您的 ajax 请求不断执行的原因。