Improve client side input validation
This commit is contained in:
parent
b34348f035
commit
e351a61964
3 changed files with 64 additions and 60 deletions
|
|
@ -85,29 +85,19 @@ body {
|
|||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.createTable {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 10px;
|
||||
}
|
||||
|
||||
.createTable .labelColumn {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.labelColumn {
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.labelColumn strong:after {
|
||||
content: ":";
|
||||
.torrent-form .form-group {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.form-group .control-label:after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
.form-group .control-label.required:after {
|
||||
content: "*:";
|
||||
}
|
||||
|
||||
.detectedFiles {
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
valid = true
|
||||
file = document.querySelectorAll("input.file")[0]
|
||||
category = document.querySelectorAll("#category")[0]
|
||||
subcategory = document.querySelectorAll("#subcategory")[0]
|
||||
torrentname = document.querySelectorAll("input.name")[0]
|
||||
description = document.querySelectorAll("textarea.description")[0]
|
||||
|
||||
/* TODO: Iterate over these to do dynamic requirement checking
|
||||
form_groups = document.querySelectorAll(".torrent-form .form-group.required")
|
||||
required_inputs = document.querySelectorAll(".torrent-form input.required")
|
||||
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) {
|
||||
valid = false
|
||||
file.parentElement.parentElement.classList.add("has-error")
|
||||
file.parentElement.parentElement.classList.remove("has-success")
|
||||
setError(file_label)
|
||||
} else {
|
||||
file.parentElement.parentElement.classList.add("has-success")
|
||||
file.parentElement.parentElement.classList.remove("has-error")
|
||||
setSuccess(file_label)
|
||||
}
|
||||
|
||||
if(category.value < 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")
|
||||
setError(category_label)
|
||||
} else {
|
||||
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
|
||||
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
|
||||
setSuccess(category_label)
|
||||
}
|
||||
|
||||
if(subcategory.value < 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")
|
||||
setError(category_label)
|
||||
} else {
|
||||
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
|
||||
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
|
||||
setSuccess(category_label)
|
||||
}
|
||||
|
||||
if(torrentname.value.length <= 0) {
|
||||
valid = false
|
||||
torrentname.parentElement.parentElement.classList.add("has-error")
|
||||
torrentname.parentElement.parentElement.classList.remove("has-success")
|
||||
setError(name_label)
|
||||
} else {
|
||||
torrentname.parentElement.parentElement.classList.add("has-success")
|
||||
torrentname.parentElement.parentElement.classList.remove("has-error")
|
||||
setSuccess(name_label)
|
||||
}
|
||||
|
||||
if(description.value.length <= 0) {
|
||||
valid = false
|
||||
description.parentElement.parentElement.classList.add("has-error")
|
||||
description.parentElement.parentElement.classList.remove("has-success")
|
||||
setError(description_label)
|
||||
} else {
|
||||
description.parentElement.parentElement.classList.add("has-success")
|
||||
description.parentElement.parentElement.classList.remove("has-error")
|
||||
setSuccess(description_label)
|
||||
}
|
||||
|
||||
return valid;
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ vim: ts=2 noexpandtab
|
|||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<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">{{ _("Torrent file") }}</label>
|
||||
<form class="form-horizontal torrent-form" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
|
||||
<div class="form-group file required">
|
||||
<label for="inputTorrentFile" class="col-sm-3 control-label required">{{ _("Torrent file") }}</label>
|
||||
<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 class="form-group detectedInfosGroup">
|
||||
|
|
@ -52,12 +52,12 @@ vim: ts=2 noexpandtab
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="category" class="col-sm-3 control-label">{{ _("Category") }}</label>
|
||||
<div class="form-group category required">
|
||||
<label for="category" class="col-sm-3 control-label required">{{ _("Category") }}</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="row row-container">
|
||||
<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>
|
||||
{% for category in categories %}
|
||||
<option value="{{ category.id }}">{{ category.label }}</option>
|
||||
|
|
@ -65,27 +65,27 @@ vim: ts=2 noexpandtab
|
|||
</select>
|
||||
</div>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-3 control-label">{{ _("Name") }}</label>
|
||||
<div class="form-group name required">
|
||||
<label for="inputName" class="col-sm-3 control-label required">{{ _("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">
|
||||
<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 class="form-group">
|
||||
<label for="inputName" class="col-sm-3 control-label">{{ _("Audio quality") }}</label>
|
||||
<div class="form-group audioquality">
|
||||
<label for="audioquality_description" class="col-sm-3 control-label">{{ _("Audio quality") }}</label>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-3 control-label">{{ _("Video quality") }}</label>
|
||||
<div class="form-group videoquality">
|
||||
<label for="videoquality_description" class="col-sm-3 control-label">{{ _("Video quality") }}</label>
|
||||
<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">
|
||||
</div>
|
||||
|
|
@ -114,10 +114,10 @@ vim: ts=2 noexpandtab
|
|||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-3 control-label">{{ _("Description") }}</label>
|
||||
<div class="form-group description required">
|
||||
<label for="inputName" class="col-sm-3 control-label required">{{ _("Description") }}</label>
|
||||
<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 class="form-group">
|
||||
|
|
|
|||
Loading…
Reference in a new issue