Search code examples
javascriptbuttonsubmitdisableparsley

button not disabling , when error=true then also

I have added javascript code that should disable button when there is error for preventing form submission , I can see the error but button is not disabling and it's submitting the form ,

In the console.log i can see true also

$(function() {
  $('#homePage').parsley();
  $('#image').on('change', function() {
    validateImage(this);
  });
});

function validateImage(input) {
  var file = input.files[0];
  var fileType = file.type.toLowerCase();
  var fileSize = file.size;
  var fileSizeInMB = fileSize / (1024 * 1024);
  var error = false;
  if (fileType.indexOf('image') === -1) {
    $(input).parsley().addError('custom', {
      message: 'Please select an image file.',
      updateClass: true
    });
    $(input).focus();
    error = true;
  } else if (fileSizeInMB > 3) {
    input.value = '';
    $(input).parsley().addError('custom', {
      message: 'File size should be less than 3 KB.',
      updateClass: true
    });
    $(input).focus();
    error = true;
  } else {
    $(input).parsley().reset();
  }
  console.log(error);
  if (error === true) {
    $('input[type="submit"]').prop('disabled', true);
  } else {
    $('input[type="submit"]').prop('disabled', false);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>

 <button type="submit" name="submit" id="submit" class="btn btn-primary">Update</button>

Solution

  • Hi, Please use this code it will work

    <!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
 <button type="submit" name="submit" id="submit" class="btn btn-primary">Update</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

  <script>
  
    $(function() {
    $('#homePage').parsley();
    $('#image').on('change', function() {
      validateImage(this);
    });
  });

  function validateImage(input) {
    var file = input.files[0];
    var fileType = file.type.toLowerCase();
    var fileSize = file.size;
    var fileSizeInMB = fileSize / (1024 * 1024);
    var error = false;

    if (fileType.indexOf('image') === -1) {
      $(input).parsley().addError('custom', { message: 'Please select an image file.', updateClass: true });
      $(input).focus();
      error = true;
    } else if (fileSizeInMB > 3) {
      input.value = '';
      $(input).parsley().addError('custom', { message: 'File size should be less than 3 KB.', updateClass: true });
      $(input).focus();
      error = true;
    } else {
      $(input).parsley().reset();
    }

    console.log(error);

    if (error === true) {
      $('#submit').prop('disabled', true); // Corrected selector
    } else {
      $('#submit').prop('disabled', false); // Corrected selector
    }
  }
  </script>
</body>
</html>