Rahul Devan Rahul Devan - 1 year ago 62
Javascript Question

Button click event is working even if the validation is given

I have a function in javascript which will work with button click event. I need the function to work only if the total form validation return true. I am using jquery validation plugin to validate the form. Validation is working properly, but when I clicks the button, even though validation is there, still it is going inside the function.

I am calling the function like this:

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">

//And my validation will be as follows:

rules: {
//Here all the validation rules
messages: {
//Here all the error messages


Answer Source

You are mixing dom and jquery event listeners. The line document.getElementById('btnNext').addEventListener('click', handleFileSelect, false); is listening to dom events. You can just do

$('#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)

preventDefault doc details this function.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download