表单验证中的更改事件

Question

I am working on the following jQuery form validation script.

I am looking to validate that certain input fields are populated before the submit button is clickable. I seem to be having an issue with the second condition within my validateFileInput function

/* Validate File Size */
var validateFileInput = function() {
  if ($('#fileField')[0].files.length > 0 || $('#defImage').val().length > 0 )   {
    return true;
   }
 }                   

var validate = function(){
  if ($('#campaign_name').val().length   >   0   &&
      $('#headline_area').val().length  >   0   &&
      $('#description_area').val().length  >   0 &&
      validateFileInput()  ) {
      $("input[type=submit]").prop("disabled", false);
  }
  else {
    $("input[type=submit]").prop("disabled", true);
  }
}

$(document).ready(function () {
 validate();
  $('#new_campaign').on( 'change', ':input', function (e){
    e.preventDefault();
    validate();
    console.log('I just validated');   
 });
});

So it seems that this line is the issue as when the condition is met the submit button is still unclickable:

$('#defImage').val().length > 0

If I run it in the console after adding a file it outputs to true, so I'm not sure as to why this will not work.

Edit

The html for the second file field looks like so:

<a data-remote="true" data-target=".our-images" data-toggle="modal" href="/default_images" id="image-default-button">Use one of ours</a>   
<input id="defImage" name="campaign[default_image_id]" type="hidden" />

I am using an Ajax request to get the image and then passing the id of the image to the hidden field #defImage, which will then give me

<input id="defImage" name="campaign[default_image_id]" type="hidden" value="3" />

Am I handling this wrong with the validation?

I have created a jsfiddle but this all works when the input type is set to file.

Answer 1

Your function returns true if there's a file, but undefined when the condition is false , so it fails.

Try to change your

var validateFileInput = function() {
  if ($('#fileField')[0].files.length > 0 || $('#defImage').val().length > 0 )   {
    return true;
   }
 }  

to :

var validateFileInput = function() {
  return ($('#fileField')[0].files.length > 0 || $('#defImage').val().length > 0 );
 }