implemented the right bootstrap form add made some more JS-form-validation
This commit is contained in:
parent
13ce1a8c81
commit
8da224ddf9
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(category.value.length <= 0) { valid = false }
|
||||
if(subcategory.value.length <= 0) { valid = false }
|
||||
if(torrentname.value.length <= 0) { valid = false }
|
||||
if(description.value.length <= 0) { valid = false }
|
||||
if(file.value.length <= 0) {
|
||||
valid = false
|
||||
file.parentElement.parentElement.classList.add("has-error")
|
||||
file.parentElement.parentElement.classList.remove("has-success")
|
||||
} 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) {
|
||||
|
|
|
|||
|
|
@ -17,21 +17,16 @@ vim: ts=2 noexpandtab
|
|||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<form action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
|
||||
<div class="row">
|
||||
<div class="col-md-4 labelColumn">
|
||||
<strong>{{ getLocalString(language, "torrent_file") }}</strong>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<form class="form-horizontal" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
|
||||
<div class="form-group">
|
||||
<label for="inputTorrentFile" class="col-sm-3 control-label">{{ getLocalString(language, "torrent_file") }}</label>
|
||||
<div class="col-sm-9">
|
||||
<input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 labelColumn">
|
||||
<strong>{{ getLocalString(language, "category") }}</strong>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="form-group">
|
||||
<label for="inputCategory" class="col-sm-3 control-label">{{ getLocalString(language, "category") }}</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="row row-container">
|
||||
<div class="col-md-6 category-column">
|
||||
<div class="dropdown">
|
||||
|
|
@ -61,48 +56,44 @@ vim: ts=2 noexpandtab
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 labelColumn">
|
||||
<strong>Audio-Quality</strong>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="btn-group" 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>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span> Stereo</input>
|
||||
</label>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 5.1</input>
|
||||
</label>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 6.1</input>
|
||||
</label>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span> 7.1</input>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-3 control-label">{{ getLocalString(language, "name") }}</label>
|
||||
<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>
|
||||
<div class="row">
|
||||
<div class="col-md-4 labelColumn">
|
||||
<strong>{{ getLocalString(language, "name") }}</strong>
|
||||
</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 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>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span> Stereo</input>
|
||||
</label>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 5.1</input>
|
||||
</label>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 6.1</input>
|
||||
</label>
|
||||
<label class="btn btn-default">
|
||||
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span> 7.1</input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 labelColumn">
|
||||
<strong>{{ getLocalString(language, "description") }}</strong>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-3 control-label">{{ getLocalString(language, "description") }}</label>
|
||||
<div class="col-sm-9">
|
||||
<textarea name="description" class="form-control description" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {{ getLocalString(language, "create") }}!</button>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue