implemented the right bootstrap form add made some more JS-form-validation

static/css/create.css

@@ -15,6 +15,15 @@
 	padding-left: 20px;
 }
 
+.quality-box {
+	display: flex;
+}
+
+.quality-box label.btn {
+	width: 100%;
+	flex-grow: 1;
+}
+
 /* Links */
 a,
 a:focus,
@@ -95,6 +104,10 @@ body {
 	content: ":";
 }
 
+.form-group .control-label:after {
+	content: ":";
+}
+
 .row {
 	margin-bottom: 10px;
 }

static/js/create.js

@@ -82,7 +82,6 @@ function customizeUploadButton() {
 function setButtonToFilename(event) {
 	$("input[name='torrentFile']").each(function() {
 		var fileName = $(this).val().split('/').pop().split('\\').pop();
-		console.log(event["target"]);
 		targetInput = event["target"]
 		button = targetInput.previousSibling.getElementsByClassName("text")[0]
 		button.innerHTML = chunk(fileName, 40)
@@ -104,13 +103,52 @@ function validateForm() {
 	subcategory = document.querySelectorAll("input.subcategory")[0]
 	torrentname = document.querySelectorAll("input.name")[0]
 	description = document.querySelectorAll("textarea.description")[0]
-	if(file.value.length <= 0) { valid = false }
+	if(file.value.length <= 0) {
-	if(category.value.length <= 0) { valid = false }
+		valid = false
-	if(subcategory.value.length <= 0) { valid = false }
+		file.parentElement.parentElement.classList.add("has-error")
-	if(torrentname.value.length <= 0) { valid = false }
+		file.parentElement.parentElement.classList.remove("has-success")
-	if(description.value.length <= 0) { valid = false }
+	} else {
+		file.parentElement.parentElement.classList.add("has-success")
+		file.parentElement.parentElement.classList.remove("has-error")
+	}
 
-	return false;
+	if(category.value.length <= 0) {
+		valid = false
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error")
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
+	} else {
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
+	}
+
+	if(subcategory.value.length <= 0) {
+		valid = false
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error")
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
+	} else {
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
+		category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
+	}
+
+	if(torrentname.value.length <= 0) {
+		valid = false
+		torrentname.parentElement.parentElement.classList.add("has-error")
+		torrentname.parentElement.parentElement.classList.remove("has-success")
+	} else {
+		torrentname.parentElement.parentElement.classList.add("has-success")
+		torrentname.parentElement.parentElement.classList.remove("has-error")
+	}
+
+	if(description.value.length <= 0) {
+		valid = false
+		description.parentElement.parentElement.classList.add("has-error")
+		description.parentElement.parentElement.classList.remove("has-success")
+	} else {
+		description.parentElement.parentElement.classList.add("has-success")
+		description.parentElement.parentElement.classList.remove("has-error")
+	}
+
+	return valid;
 }
 
 function chunk(string, n) {

templates/create.html

@@ -17,21 +17,16 @@ vim: ts=2 noexpandtab
 		</div>
 		{% endfor %}
 		{% endif %}
-
+		<form class="form-horizontal" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
-		<form action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
+			<div class="form-group">
-			<div class="row">
+				<label for="inputTorrentFile" class="col-sm-3 control-label">{{ getLocalString(language, "torrent_file") }}</label>
-				<div class="col-md-4 labelColumn">
+				<div class="col-sm-9">
-					<strong>{{ getLocalString(language, "torrent_file") }}</strong>
-				</div>
-				<div class="col-md-8">
 					<input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)">
 				</div>
 			</div>
-			<div class="row">
+			<div class="form-group">
-				<div class="col-md-4 labelColumn">
+				<label for="inputCategory" class="col-sm-3 control-label">{{ getLocalString(language, "category") }}</label>
-					<strong>{{ getLocalString(language, "category") }}</strong>
+				<div class="col-sm-9">
-				</div>
-				<div class="col-md-8">
 					<div class="row row-container">
 						<div class="col-md-6 category-column">
 							<div class="dropdown">
@@ -61,12 +56,16 @@ vim: ts=2 noexpandtab
 					</div>
 				</div>
 			</div>
-			<div class="row">
+			<div class="form-group">
-				<div class="col-md-4 labelColumn">
+				<label for="inputName" class="col-sm-3 control-label">{{ getLocalString(language, "name") }}</label>
-					<strong>Audio-Quality</strong>
+				<div class="col-sm-9">
+					<input type="text" name="name" class="form-control name" placeholder="e.g. Attack of the Killer Tomatoes" aria-describedby="basic-addon1">
 				</div>
-				<div class="col-md-8">
+			</div>
-						<div class="btn-group" data-toggle="buttons">
+			<div class="form-group">
+				<label for="inputName" class="col-sm-3 control-label">Audio-Quality</label>
+				<div class="col-sm-9">
+					<div class="btn-group quality-box" data-toggle="buttons">
 						<label class="btn btn-default">
 							<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span> Subs</input>
 						</label>
@@ -85,25 +84,17 @@ vim: ts=2 noexpandtab
 					</div>
 				</div>
 			</div>
-			<div class="row">
+			<div class="form-group">
-				<div class="col-md-4 labelColumn">
+				<label for="inputName" class="col-sm-3 control-label">{{ getLocalString(language, "description") }}</label>
-					<strong>{{ getLocalString(language, "name") }}</strong>
+				<div class="col-sm-9">
-				</div>
-				<div class="col-md-8">
-					<input type="text" name="name" class="form-control name has-success" placeholder="e.g. Attack of the Killer Tomatoes" aria-describedby="basic-addon1">
-				</div>
-			</div>
-			<div class="row">
-				<div class="col-md-4 labelColumn">
-					<strong>{{ getLocalString(language, "description") }}</strong>
-				</div>
-				<div class="col-md-8">
 					<textarea name="description" class="form-control description" rows="10"></textarea>
 				</div>
 			</div>
-			<div class="button-container">
+			<div class="form-group">
+				<div class="col-sm-offset-3 col-sm-9">
 					<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {{ getLocalString(language, "create") }}!</button>
 				</div>
+			</div>
 		</form>
 	</div>
 {% endblock content%}