first javascript form validation implementation

This commit is contained in:
sqozz 2015-02-15 05:43:17 +01:00
parent 9ec244d9f3
commit 13ce1a8c81
2 changed files with 25 additions and 9 deletions

View File

@ -71,10 +71,10 @@ function fillDropdownByValue(value, dropdownToFill) {
// Hides the default browser-upload-form and replaces it by an button
function customizeUploadButton() {
$(".tfile").before('<button id="button-file" type="button" class="btn btn-default"><span class="text">Upload...</span><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span></button>');
$(".tfile").hide();
$("input.file").before('<button id="button-file" type="button" class="btn btn-default"><span class="text">Upload...</span><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span></button>');
$("input.file").hide();
$('body').on('click', '#button-file', function() {
$(".tfile").trigger('click');
$("input.file").trigger('click');
});
}
@ -97,6 +97,22 @@ function setDropdownButtonText(text, dropdownButton) {
dropdownTextSpan.innerHTML = text
}
function validateForm() {
valid = true
file = document.querySelectorAll("input.file")[0]
category = document.querySelectorAll("input.category")[0]
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 }
return false;
}
function chunk(string, n) {
var ret = "";
for(var i=0, len=string.length; i < len; i += n) {

View File

@ -18,13 +18,13 @@ vim: ts=2 noexpandtab
{% endfor %}
{% endif %}
<form action="/create" method="post" enctype="multipart/form-data">
<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">
<input name="torrentFile" class="tfile" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)">
<input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)">
</div>
</div>
<div class="row">
@ -38,7 +38,7 @@ vim: ts=2 noexpandtab
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="text">{{ getLocalString(language, "category") }}</span>
<span class="caret"></span>
<input type="hidden" name="category">
<input type="hidden" name="category" class="category">
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
{% for category in sorted(categories.keys()) %}
@ -52,7 +52,7 @@ vim: ts=2 noexpandtab
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" disabled>
<span class="text">{{ getLocalString(language, "subcategory") }}</span>
<span class="caret"></span>
<input type="hidden" name="subcategory">
<input type="hidden" name="subcategory" class="subcategory">
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
</ul>
@ -90,7 +90,7 @@ vim: ts=2 noexpandtab
<strong>{{ getLocalString(language, "name") }}</strong>
</div>
<div class="col-md-8">
<input type="text" name="name" class="form-control" placeholder="e.g. Attack of the Killer Tomatoes" aria-describedby="basic-addon1">
<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">
@ -98,7 +98,7 @@ vim: ts=2 noexpandtab
<strong>{{ getLocalString(language, "description") }}</strong>
</div>
<div class="col-md-8">
<textarea name="description" class="form-control" rows="10"></textarea>
<textarea name="description" class="form-control description" rows="10"></textarea>
</div>
</div>
<div class="button-container">