sqozz/TorrentIndexer
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improve client side input validation

Browse source
This commit is contained in:
sqozz 2017-12-30 22:28:26 +01:00
parent b34348f035
commit e351a61964
3 changed files with 64 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/css/create.css
View file

@ -85,29 +85,19 @@ body {
vertical-align: inherit; vertical-align: inherit;
} }
.createTable { .torrent-form .form-group {
width: 100%; margin-left: 0px;
table-layout: fixed; margin-right: 0px;
border-collapse: separate;
border-spacing: 10px;
}
.createTable .labelColumn {
width: 200px;
}
.labelColumn {
vertical-align: center;
}
.labelColumn strong:after {
content: ":";
} }
.form-group .control-label:after { .form-group .control-label:after {
content: ":"; content: ":";
} }
.form-group .control-label.required:after {
content: "*:";
}
.detectedFiles { .detectedFiles {
max-height: 100px; max-height: 100px;
overflow: auto; overflow: auto;

64
static/js/create.js
View file

@ -118,56 +118,70 @@ function setButtonToFilename(event) {
}); });
} }
function setError(element) {
element.classList.add("has-error")
element.remove("has-success")
}
function setSuccess(element) {
element.classList.add("has-success")
element.classList.remove("has-error")
}
function validateForm() { function validateForm() {
valid = true valid = true
file = document.querySelectorAll("input.file")[0]
category = document.querySelectorAll("#category")[0] /* TODO: Iterate over these to do dynamic requirement checking
subcategory = document.querySelectorAll("#subcategory")[0] form_groups = document.querySelectorAll(".torrent-form .form-group.required")
torrentname = document.querySelectorAll("input.name")[0] required_inputs = document.querySelectorAll(".torrent-form input.required")
description = document.querySelectorAll("textarea.description")[0] required_dropdown = document.querySelectorAll(".torrent-form select.dropdown.required")
required_textarea = document.querySelectorAll(".torrent-form textarea.required")
*/
file = document.querySelector(".torrent-form .file input")
category = document.querySelector("#category")
subcategory = document.querySelector("#subcategory")
torrentname = document.querySelector(".torrent-form .name input")
description = document.querySelector(".torrent-form .description textarea")
file_label = document.querySelector(".torrent-form .file")
category_label = document.querySelector(".torrent-form .category")
name_label = document.querySelector(".torrent-form .name")
description_label = document.querySelector(".torrent-form .description")
if(file.value.length <= 0) { if(file.value.length <= 0) {
valid = false valid = false
file.parentElement.parentElement.classList.add("has-error") setError(file_label)
file.parentElement.parentElement.classList.remove("has-success")
} else { } else {
file.parentElement.parentElement.classList.add("has-success") setSuccess(file_label)
file.parentElement.parentElement.classList.remove("has-error")
} }
if(category.value < 0) { if(category.value < 0) {
valid = false valid = false
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error") setError(category_label)
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
} else { } else {
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success") setSuccess(category_label)
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
} }
if(subcategory.value < 0) { if(subcategory.value < 0) {
valid = false valid = false
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error") setError(category_label)
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
} else { } else {
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success") setSuccess(category_label)
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
} }
if(torrentname.value.length <= 0) { if(torrentname.value.length <= 0) {
valid = false valid = false
torrentname.parentElement.parentElement.classList.add("has-error") setError(name_label)
torrentname.parentElement.parentElement.classList.remove("has-success")
} else { } else {
torrentname.parentElement.parentElement.classList.add("has-success") setSuccess(name_label)
torrentname.parentElement.parentElement.classList.remove("has-error")
} }
if(description.value.length <= 0) { if(description.value.length <= 0) {
valid = false valid = false
description.parentElement.parentElement.classList.add("has-error") setError(description_label)
description.parentElement.parentElement.classList.remove("has-success")
} else { } else {
description.parentElement.parentElement.classList.add("has-success") setSuccess(description_label)
description.parentElement.parentElement.classList.remove("has-error")
} }
return valid; return valid;

36
templates/create.html
View file

@ -25,11 +25,11 @@ vim: ts=2 noexpandtab
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<form class="form-horizontal" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()"> <form class="form-horizontal torrent-form" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<div class="form-group"> <div class="form-group file required">
<label for="inputTorrentFile" class="col-sm-3 control-label">{{ _("Torrent file") }}</label> <label for="inputTorrentFile" class="col-sm-3 control-label required">{{ _("Torrent file") }}</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="application/x-bittorrent" onchange="setButtonToFilename(event)"> <input name="torrentFile" class="file required" type="file" size="50" maxlength="100000" accept="application/x-bittorrent" onchange="setButtonToFilename(event)">
</div> </div>
</div> </div>
<div class="form-group detectedInfosGroup"> <div class="form-group detectedInfosGroup">
@ -52,12 +52,12 @@ vim: ts=2 noexpandtab
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group category required">
<label for="category" class="col-sm-3 control-label">{{ _("Category") }}</label> <label for="category" class="col-sm-3 control-label required">{{ _("Category") }}</label>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="row row-container"> <div class="row row-container">
<div class="col-md-6 category-column"> <div class="col-md-6 category-column">
<select class="form-control dropdown" id="category" name="category"> <select class="form-control dropdown required" id="category" name="category">
<option value="-1" selected>--- {{ _("Select Category") }} ---</option> <option value="-1" selected>--- {{ _("Select Category") }} ---</option>
{% for category in categories %} {% for category in categories %}
<option value="{{ category.id }}">{{ category.label }}</option> <option value="{{ category.id }}">{{ category.label }}</option>
@ -65,27 +65,27 @@ vim: ts=2 noexpandtab
</select> </select>
</div> </div>
<div class="col-md-6 subcategory-column"> <div class="col-md-6 subcategory-column">
<select class="form-control dropdown" id="subcategory" name="subcategory"> <select class="form-control dropdown required" id="subcategory" name="subcategory">
<option value="-1" selected>--- {{ _("Select Subcategory") }} ---</option> <option value="-1" selected>--- {{ _("Select Subcategory") }} ---</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group name required">
<label for="inputName" class="col-sm-3 control-label">{{ _("Name") }}</label> <label for="inputName" class="col-sm-3 control-label required">{{ _("Name") }}</label>
<div class="col-sm-9"> <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"> <input type="text" name="name" class="form-control name required" placeholder="{{ _("e.g. Attack of the Killer Tomatoes") }}" aria-describedby="basic-addon1">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group audioquality">
<label for="inputName" class="col-sm-3 control-label">{{ _("Audio quality") }}</label> <label for="audioquality_description" class="col-sm-3 control-label">{{ _("Audio quality") }}</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" name="audioquality_description" class="form-control name" placeholder="{{ _("e.g. English, AC-3 @ 384kbps") }}" aria-describedby="basic-addon1"> <input type="text" name="audioquality_description" class="form-control name" placeholder="{{ _("e.g. English, AC-3 @ 384kbps") }}" aria-describedby="basic-addon1">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group videoquality">
<label for="inputName" class="col-sm-3 control-label">{{ _("Video quality") }}</label> <label for="videoquality_description" class="col-sm-3 control-label">{{ _("Video quality") }}</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="text" name="videoquality_description" class="form-control name" placeholder="{{ _("e.g. XviD, 720×400 @ 1809 kbps") }}" aria-describedby="basic-addon1"> <input type="text" name="videoquality_description" class="form-control name" placeholder="{{ _("e.g. XviD, 720×400 @ 1809 kbps") }}" aria-describedby="basic-addon1">
</div> </div>
@ -114,10 +114,10 @@ vim: ts=2 noexpandtab
</div> </div>
</div> </div>
--> -->
<div class="form-group"> <div class="form-group description required">
<label for="inputName" class="col-sm-3 control-label">{{ _("Description") }}</label> <label for="inputName" class="col-sm-3 control-label required">{{ _("Description") }}</label>
<div class="col-sm-9"> <div class="col-sm-9">
<textarea name="description" class="form-control description" rows="10" placeholder="{{ _("Hint: Markdown is supported in this field") }}"></textarea> <textarea name="description" class="form-control description required" rows="10" placeholder="{{ _("Hint: Markdown is supported in this field") }}"></textarea>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">