add the required property when browse form is clicked

Question

I'm working on some very simple file browser to categorize downloadable files on the website in PHP. The intension was that I could create a new folder simply by filling in a desired username, browse and upload a thumbnail for that folder.

While working on this I noticed that it would be useful to pick an existing image instead of uploading new pictures and creating duplicated files.

So that's what I did. I decided to work with radio buttons, which contains images and 1 radio button which holds the browse input.

Tough when the browse input is selected it should set the required property, but when an existing image is chosen from the list it should remove the property. And after an evening struggling I came up with this: http://jsfiddle.net/p8u75xje/2/
This seems to work fine... as long as you click the radio button next to the browse input. When you click an existing image, then change your mind and click the browse field to eventually cancel and still submit the form it did not set the required property and does not hold you from uploading "digital air"

How can I make the required property is also set when I click the browse input and not only when the radio button is clicked as I would see those buttons been hidden in my final result.

<form>
    <label>
        <input type="radio" name="dlthumbs" value="upload" id="newimg" 
        onclick="document.getElementById('image').focus()" required  checked="checked">

        <input type="file" name="image" id="image"
        onclick="document.getElementById('newimg').checked=true" required>
    </label>

    <label id='thumbexcists'>
        <input type="radio" name="dlthumbs">
        <img style='width: 50px; height: 50px' src='$catthumb'>
    </label>
    <label id='thumbexcists'>
        <input type="radio" name="dlthumbs">
        <img style='width: 50px; height: 50px' src='$catthumb'>
    </label>
<script>
    $('input[name="dlthumbs"]').change(function () {
        if($("#newimg").is(':checked')) {
            $('#image').prop('required', true);
        } else {
            $('#image').removeAttr('required');
        }
    });
</script>
<input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" />
</form>

Answer 1

See code comments for steps taken.

$(document).ready(function() {
  $('input[name="dlthumbs"]').change(checkRequired);

  // since you're defaulting to the "newimg" being checked, 
  // you probably want to run this on page load as well
  checkRequired();
});



function checkRequired() {
  if ($("#newimg").is(':checked')) {
    $('#image').prop('required', true);
  } else {
    // #newimage is currently set to required in your markup. toggle that too.
    $('#image, #newimg').removeAttr('required');
    
    // could add #newimg to prop('required', true) above but it doesn't really need to be. 
    // The file input is what's required.

  }
}

/* CSS to make it all obvious in the test. */
[required] {
  padding: 10px;
  background-color: red;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td>
        <label>
          <input type="radio" name="dlthumbs" value="upload" id="newimg" onclick="document.getElementById('image').focus()" required checked="checked">
  
          <!-- 
               Trigger a click on "newimage". This runs the checkRequired() code. 
               Also removed required from the element. JS will handle that.
               You could also change the name of this input to dlthumbs. 
          -->
          <input type="file" name="image" id="image" onclick="document.getElementById('newimg').click()">
        </label>
      </td>
    </tr>
    <tr>
      <td>
        <label id='thumbexcists'>
          <input type="radio" name="dlthumbs">
          <img style='width: 50px; height: 50px' src='$catthumb'>
        </label>
        <label id='thumbexcists'>
          <input type="radio" name="dlthumbs">
          <img style='width: 50px; height: 50px' src='$catthumb'>
        </label>
      </td>
    </tr>
  </table>
  <script>
  </script>
  <input type="submit" name="catcreate" id="butedit" class="butedit" value="Create" />
</form>