Validate file input type for mandatory presence in html

Question

I have a popup with a form containing file upload cfgfile

<form id="mainForm" method="post" enctype="multipart/form-data" action="">
            <input type="hidden" id="resulttype" value="Create"/>
            <input type="hidden" id="sessiontoken" name="sessiontoken" />
            <input type="hidden" id="cfgid" name="cfgid"/>
            <img  id="titleImage" alt="title" src="/csm/view/images/creat_conform_title.gif" width="216" hspace="4" height="17" vspace="4"/>&nbsp;&nbsp;
            <table id="popupInfo" align="center" width="90%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>To create a new configuration,please download the CSMClient Utility from the "Download CSMClient" option.Run the utility in your environment and upload the generated output XML file.</td>
              </tr>
            </table>&nbsp;
            <table id="downloadLinks" align="center" cellpadding="2" width="90%" border="0" cellspacing="0">
                <tr><td>
                <input name="Button1" type="button" onclick="openDownloadPage()"  id="button1" value="Download CSMClient" class="btn" />&nbsp;
                <a href="https://my-prod.informatica.com/infakb/howto/1/Pages/31738.aspx" target='_new' >How to run CSMClient</a></td></tr>
            </table>
            <table align="center" class="csm-table" width="90%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle" width="30%" >Name </td>
                    <td width="70%"><input type="text" id="cfgname" name="cfgname" tabindex="1" size="26" maxlength="64" value="" /> </td>
                </tr>   
                <tr>
                  <td valign="middle" height="65">Description </td>
                  <td height="65">
                  <textarea type="text" class="dis_box" tabindex="2" id="cfgdesc" name="cfgdesc"  ></textarea>    
                  </td>
                </tr>
                <tr valign="middle"><tr>
                <td>Type</td><td>
                <select type="select" id="cfgenv" name="cfgenv" tabindex="3">
                    <option value="Production" >Production&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                    <option value="Development" >Development</option>
                    <option value="Test/QA" >Test/QA</option>
                </select></td></tr>
                <tr valign="middle"><td>Upload CSMClient Output File</td>
                    <!-- <td><input type="file" id="cfgfile" name="cfgfile" tabindex="4"  class="multi"  maxlength="1" accept="xml" id="filefield" ></td>-->
                    <td id="filetd"><input type="file" id="cfgfile" name="cfgfile" tabindex="4" /></td>
                </tr>
            </table>
            <table align="center" border="0" cellpadding="10" cellspacing="0" width="84%">
            <tr>
                <td colspan="3" align="center">
                    <label>
                        <input type="submit"  tabindex="5"  value="Create Configuration" id="btnSummary" class="btn" onClick="" />
                        <!--<input  type="button"  tabindex="5"  value="Create Configuration" id="btnSummary" class="btn" onClick="micoxUpload('postUploadInfo','Loading...','Error in upload'); return false;" />-->
                        <!--onClick="micoxUpload(this.form,'/csm/upload','postUploadInfo','Loading...','Error in upload'); return false;"-->
                    </label>
                        &nbsp;
                    <label>
                        <input type="button"  tabindex="6" value="Cancel" id="btnCancel" class="btn"/>
                    </label>
                </td>
              </tr>
            </table>
        </form>

When I reload the popup the previous value appears in it, and since we cannot set values for input file type I am removing the cfgfile and dynamically creating a new with same id.

var fileholder = document.createElement("input");
fileholder.name="cfgfile";
fileholder.type="file";

$('#cfgfile').remove();
$('#filetd').empty();
$("#filetd").append(fileholder);

Till here everything is perfect. But how can I validate whether user has selected any file or not? I used below code, but all the time I get EMPTY. So summarizing how can I validate my input file type to check whether user has entered anything or not.

if($.trim($("#cfgfile").val()) === "")
    {
        alert("EMPTY");
        event.preventDefault();
    }

Answer 1

When you reload the page, you are setting the name, but not the ID in your script, so the #cfgfile selector doesn't match anything. Try:

var fileholder = document.createElement("input");
fileholder.name="cfgfile";
fileholder.type="file";
fileholder.id = "cfgfile";

Since you're already using jQuery, you can do it like this instead:

var fileholder = $("<input/>" , {
    type: "file",
    id: "cfgfile",
    name: "cfgfile"
});    
$("#filetd").append(fileholder);