title: Change event on Form validation
body: <p>I am working on the following jQuery form validation script.</p>
  
  <p>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</p>
  
  <pre><code>/* Validate File Size */
  var validateFileInput = function() {
    if ($('#fileField')[0].files.length &gt; 0 || $('#defImage').val().length &gt; 0 )   {
      return true;
     }
   }                   
  
  var validate = function(){
    if ($('#campaign_name').val().length   &gt;   0   &amp;&amp;
        $('#headline_area').val().length  &gt;   0   &amp;&amp;
        $('#description_area').val().length  &gt;   0 &amp;&amp;
        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');   
   });
  });
  </code></pre>
  
  <p>So it seems that this line is the issue as when the condition is met the submit button is still unclickable:</p>
  
  <pre><code>$('#defImage').val().length &gt; 0
  </code></pre>
  
  <p>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.</p>
  
  <h2>Edit</h2>
  
  <p>The html for the second file field looks like so:</p>
  
  <pre><code>&lt;a data-remote="true" data-target=".our-images" data-toggle="modal" href="/default_images" id="image-default-button"&gt;Use one of ours&lt;/a&gt;   
  &lt;input id="defImage" name="campaign[default_image_id]" type="hidden" /&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;input id="defImage" name="campaign[default_image_id]" type="hidden" value="3" /&gt;
  </code></pre>
  
  <p>Am I handling this wrong with the validation?</p>
  
  <p>I have created a <a href="http://jsfiddle.net/G89X6/" rel="nofollow noreferrer">jsfiddle</a> but this all works when the input type is set to file.</p>