mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Use form validation to ensure required fields are filled on submission

Browse source
This commit is contained in:
Joe Rogers 2023-03-16 16:07:27 -04:00
parent dc29cefc9f
commit 76b620b621
No known key found for this signature in database
GPG key ID: 0074AD57B8FDBBB4
2 changed files with 40 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/mediaLibraryCreator/mediaLibraryCreator.js
View file

@ -25,7 +25,7 @@ import toast from '../toast/toast';
import alert from '../alert';
import template from './mediaLibraryCreator.template.html';
function onAddLibrary() {
function onAddLibrary(e) {
if (isCreating) {
return false;
}
@ -62,7 +62,7 @@ import template from './mediaLibraryCreator.template.html';
isCreating = false;
loading.hide();
});
return false;
e.preventDefault();
}
function getCollectionTypeOptionsHtml(collectionTypeOptions) {
@ -96,7 +96,7 @@ import template from './mediaLibraryCreator.template.html';
$('.collectionTypeFieldDescription', dlg).html(folderOption?.message || '');
});
page.querySelector('.btnAddFolder').addEventListener('click', onAddButtonClick);
page.querySelector('.btnSubmit').addEventListener('click', onAddLibrary);
page.querySelector('.addLibraryForm').addEventListener('submit', onAddLibrary);
page.querySelector('.folderList').addEventListener('click', onRemoveClick);
}

72
src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
View file

@ -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>