Merge pull request #37 from leepeuker/revalidate-watch-date-input-on-…

…focus-end Revalidate watch date input when input loses focus
leepeuker · Jul 4, 2022 · aee582a · aee582a
2 parents 9a08e10 + 168f62a
commit aee582a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/public/js/logMovie.js b/public/js/logMovie.js
@@ -1,10 +1,7 @@
-const elems = document.querySelectorAll('.datepicker_input')
-for (const elem of elems) {
-	const datepicker = new Datepicker(elem, {
-		format: 'dd.mm.yyyy',
-		title: 'Watch date',
-	})
-}
+const datepicker = new Datepicker(document.getElementById('watchDate'), {
+	format: 'dd.mm.yyyy',
+	title: 'Watch date',
+})
 
 const watchModal = document.getElementById('watchDateModal')
 watchModal.addEventListener('show.bs.modal', async function (e) {
@@ -97,12 +94,7 @@ const addAlertMessage = (message, type) => {
 	alertPlaceholder.append(wrapper)
 }
 
-function logMovie () {
-	let rating = getRatingFromStars()
-	let tmdbId = getTmdbId()
-	let watchDate = getWatchDate()
-	let movieTitle = document.getElementById('watchDateModalTitle').innerHTML
-
+function validateWatchDate (watchDate) {
 	document.getElementById('watchDateValidationRequiredErrorMessage').classList.remove('d-block')
 	document.getElementById('watchDateValidationFormatErrorMessage').classList.remove('d-block')
 
@@ -111,20 +103,36 @@ function logMovie () {
 		document.getElementById('watchDate').style.borderColor = '#dc3545'
 		document.getElementById('ratingStars').style.marginTop = '0'
 		document.getElementById('watchDateValidationRequiredErrorMessage').classList.add('d-block')
-		return
+
+		return false
 	}
+
 	if (isValidDate(watchDate) === false) {
 		document.getElementById('watchDate').style.borderStyle = 'solid'
 		document.getElementById('watchDate').style.borderColor = '#dc3545'
 		document.getElementById('ratingStars').style.marginTop = '0'
 		document.getElementById('watchDateValidationFormatErrorMessage').classList.add('d-block')
-		return
+
+		return false
 	}
 
 	document.getElementById('watchDate').style.borderStyle = ''
 	document.getElementById('watchDate').style.borderColor = ''
 	document.getElementById('ratingStars').style.marginTop = '0.5rem'
 
+	return true
+}
+
+function logMovie () {
+	let rating = getRatingFromStars()
+	let tmdbId = getTmdbId()
+	let watchDate = getWatchDate()
+	let movieTitle = document.getElementById('watchDateModalTitle').innerHTML
+
+	if (validateWatchDate(watchDate) === false) {
+		return
+	}
+
 	fetch('/log-movie', {
 		method: 'post', headers: {
 			'Content-type': 'application/json',

diff --git a/templates/page/logMovie.html.twig b/templates/page/logMovie.html.twig
@@ -62,7 +62,7 @@
                         <input type="hidden" value="" name="tmdbId" id="tmdbId" required>
                         <div class="input-group" id="watchDateGroup">
                             <i class="bi bi-calendar-date input-group-text"></i>
-                            <input type="text" class="datepicker_input form-control" placeholder="Watch date" aria-label="Watch date" name="watchDate" id="watchDate" required>
+                            <input type="text" class="datepicker_input form-control" placeholder="Watch date" aria-label="Watch date" name="watchDate" id="watchDate" required onfocusout="validateWatchDate(this.value)">
                             <div class="invalid-feedback" id="watchDateValidationRequiredErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
                                 Watch date is required!
                             </div>