即使验证成功，按钮点击事件仍在运行

Question

我有一个JavaScript函数，它可以处理按钮单击事件。只有当总体表单验证返回true时，我才需要该函数才能工作。我正在使用jquery验证插件来验证表单。验证工作正常，但是当我单击按钮时，即使验证存在，仍会进入函数内部。

我打电话的功能是这样的：

document.getElementById('btnNext').addEventListener('click', handleFileSelect, false); 

function handleFileSelect(evt) { 
//My Code goes here 
} 

//This is my form.. 

<form id="someID"> 
<button id ="next" type="submit"> 
</form> 

//And my validation will be as follows: 

$("#posterForm").validate({ 
    rules: { 
     //Here all the validation rules 
    }, 
    messages: { 
     //Here all the error messages 
    } 

}); 

Answer 1

你混合DOM和jQuery事件侦听器。行document.getElementById('btnNext').addEventListener('click', handleFileSelect, false);正在监听dom事件。你可以做

$('#btnNext').on('click', function(evt){ 
    //Validate the fields 
    var valid; 
    //set the valid field to true if the fields are true else set to false 
    if (!valid) 
    evt.preventDefault(); 
}); 

preventDefault doc详细介绍了这个功能。