Use form validation to ensure required fields are filled on submission

This commit is contained in:
Joe Rogers
2023-03-16 16:07:27 -04:00
parent dc29cefc9f
commit 76b620b621
2 changed files with 40 additions and 38 deletions
@@ -1,37 +1,39 @@
<div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
</div>
<div class="formDialogContent scrollY" style="padding-top:2em;">
<div class="dialogContentInner dialog-content-centered">
<div id="fldCollectionType" class="selectContainer">
<select is="emby-select" id="selectCollectionType" data-mini="true" required="required" label="${LabelContentType}"></select>
<div class="collectionTypeFieldDescription fieldDescription">
</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtValue" required="required" label="${LabelDisplayName}" />
</div>
<div class="folders">
<div style="display: flex; align-items: center;">
<h1 style="margin: .5em 0;">${Folders}</h1>
<button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>
<div class="paperList folderList hide" style="margin-bottom:2em;"></div>
</div>
<div class="libraryOptions"></div>
<form class="addLibraryForm" style="max-width:100%;">
<div class="formDialogHeader">
<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
<h3 class="formDialogHeaderTitle">${ButtonAddMediaLibrary}</h3>
</div>
</div>
<div class="formDialogFooter">
<button is="emby-button" type="button" class="raised btnSubmit button-submit block formDialogFooterItem">
<span>${ButtonOk}</span>
</button>
</div>
<div class="formDialogContent scrollY" style="padding-top:2em;">
<div class="dialogContentInner dialog-content-centered">
<div id="fldCollectionType" class="selectContainer">
<select is="emby-select" id="selectCollectionType" data-mini="true" required="required" label="${LabelContentType}"></select>
<div class="collectionTypeFieldDescription fieldDescription">
</div>
</div>
<div class="inputContainer">
<input is="emby-input" type="text" id="txtValue" required="required" label="${LabelDisplayName}" />
</div>
<div class="folders">
<div style="display: flex; align-items: center;">
<h1 style="margin: .5em 0;">${Folders}</h1>
<button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span>
</button>
</div>
<div class="paperList folderList hide" style="margin-bottom:2em;"></div>
</div>
<div class="libraryOptions"></div>
</div>
</div>
<div class="formDialogFooter">
<button is="emby-button" type="submit" class="raised btnSubmit button-submit block formDialogFooterItem">
<span>${ButtonOk}</span>
</button>
</div>
</form>