mirror of
https://github.com/wavelog/wavelog.git
synced 2026-03-22 10:24:14 +00:00
form validation
This commit is contained in:
HB9HIL
@@ -1,5 +1,5 @@
|
||||
<div class="container">
|
||||
<form>
|
||||
<form id="ThemeForm">
|
||||
<div class="mb-3">
|
||||
<label for="nameInput">Theme Name</label>
|
||||
<input type="text" class="form-control" name="name" id="nameInput" aria-describedby="nameInputHelp" required>
|
||||
@@ -32,7 +32,7 @@
|
||||
<input type="text" class="form-control" name="main_logo" id="mainLogoInput" aria-describedby="mainLogoInputHelp">
|
||||
<small id="mainLogoInputHelp" class="form-text text-muted">This is the name of the file which is used as <u>big</u> Logo in the login screen placed in assets/logo.<br>Only PNG files with a size ratio of 1:1 are allowed.</small>
|
||||
</div>
|
||||
|
||||
<button type="button" onclick="addTheme(this.form);" class="btn btn-primary"><i class="fas fa-plus-square"></i> Add theme</button>
|
||||
<div class="alert alert-warning" role="alert" id="warningMessageTheme" style="display: none"> </div>
|
||||
<button id="submitButton" type="button" onclick="addTheme(this.form);" class="btn btn-primary"><i class="fas fa-plus-square"></i> Add theme</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="container">
|
||||
<form>
|
||||
<form id="ThemeForm">
|
||||
<div class="mb-3">
|
||||
<label for="themenameInput">Theme Name</label>
|
||||
<input type="text" class="form-control" name="name" id="nameInput" aria-describedby="themenameInputHelp" value="<?php if(set_value('name') != "") { echo set_value('name'); } else { echo $theme->name; } ?>">
|
||||
@@ -32,7 +32,7 @@
|
||||
<input type="text" class="form-control" name="main_logo" id="mainLogoInput" aria-describedby="mainLogoInputHelp" value="<?php if(set_value('main_logo') != "") { echo set_value('main_logo'); } else { echo $theme->main_logo; } ?>">
|
||||
<small id="mainLogoInputHelp" class="form-text text-muted">This is the name of the file which is used as <u>big</u> Logo in the login screen placed in assets/logo.<br>Only PNG files with a size ratio of 1:1 are allowed.</small>
|
||||
</div>
|
||||
|
||||
<button type="button" onclick="editTheme(this.form, '<?php echo $theme->id; ?>');" class="btn btn-primary"><i class="fas fa-plus-square"></i> Update theme</button>
|
||||
<div class="alert alert-warning" role="alert" id="warningMessageTheme" style="display: none"> </div>
|
||||
<button id="submitButton" type="button" onclick="editTheme(this.form, '<?php echo $theme->id; ?>');" class="btn btn-primary"><i class="fas fa-plus-square"></i> Update theme</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,105 +1,226 @@
|
||||
function deleteTheme(id, name) {
|
||||
BootstrapDialog.confirm({
|
||||
title: 'DANGER',
|
||||
message: 'Warning! Are you sure you want to delete the following theme: ' + name + '?' ,
|
||||
type: BootstrapDialog.TYPE_DANGER,
|
||||
closable: true,
|
||||
draggable: true,
|
||||
btnOKClass: 'btn-danger',
|
||||
callback: function(result) {
|
||||
if(result) {
|
||||
$.ajax({
|
||||
url: base_url + 'index.php/themes/delete',
|
||||
type: 'post',
|
||||
data: {'id': id
|
||||
},
|
||||
success: function(data) {
|
||||
$(".theme_" + id).parent("tr:first").remove(); // removes mode from table
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
BootstrapDialog.confirm({
|
||||
title: "DANGER",
|
||||
message:
|
||||
"Warning! Are you sure you want to delete the following theme: " + name + "?",
|
||||
type: BootstrapDialog.TYPE_DANGER,
|
||||
closable: true,
|
||||
draggable: true,
|
||||
btnOKClass: "btn-danger",
|
||||
callback: function (result) {
|
||||
if (result) {
|
||||
$.ajax({
|
||||
url: base_url + "index.php/themes/delete",
|
||||
type: "post",
|
||||
data: { id: id },
|
||||
success: function (data) {
|
||||
$(".theme_" + id)
|
||||
.parent("tr:first")
|
||||
.remove(); // removes mode from table
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function addThemeDialog() {
|
||||
$.ajax({
|
||||
url: base_url + 'index.php/themes/add',
|
||||
type: 'post',
|
||||
success: function(html) {
|
||||
BootstrapDialog.show({
|
||||
title: 'Create Theme',
|
||||
size: BootstrapDialog.SIZE_NORMAL,
|
||||
cssClass: 'create-theme-dialog',
|
||||
nl2br: false,
|
||||
message: html,
|
||||
buttons: [{
|
||||
label: lang_admin_close,
|
||||
action: function (dialogItself) {
|
||||
dialogItself.close();
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: base_url + "index.php/themes/add",
|
||||
type: "post",
|
||||
success: function (html) {
|
||||
BootstrapDialog.show({
|
||||
title: "Create Theme",
|
||||
size: BootstrapDialog.SIZE_NORMAL,
|
||||
cssClass: "create-theme-dialog",
|
||||
nl2br: false,
|
||||
message: html,
|
||||
buttons: [
|
||||
{
|
||||
label: lang_admin_close,
|
||||
action: function (dialogItself) {
|
||||
dialogItself.close();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function addTheme(form) {
|
||||
if (form.name.value != '') {
|
||||
$.ajax({
|
||||
url: base_url + 'index.php/themes/add',
|
||||
type: 'post',
|
||||
data: {
|
||||
'name': form.name.value,
|
||||
'foldername': form.foldername.value,
|
||||
'theme_mode': form.theme_mode.value,
|
||||
'header_logo': form.header_logo.value,
|
||||
'main_logo': form.main_logo.value,
|
||||
},
|
||||
success: function(html) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
if (formValidation()) {
|
||||
if (form.name.value != "") {
|
||||
$.ajax({
|
||||
url: base_url + "index.php/themes/add",
|
||||
type: "post",
|
||||
data: {
|
||||
name: form.name.value,
|
||||
foldername: form.foldername.value,
|
||||
theme_mode: form.theme_mode.value,
|
||||
header_logo: form.header_logo.value,
|
||||
main_logo: form.main_logo.value,
|
||||
},
|
||||
success: function (html) {
|
||||
location.reload();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function editThemeDialog(theme_id) {
|
||||
$.ajax({
|
||||
url: base_url + 'index.php/themes/edit/' + theme_id,
|
||||
type: 'post',
|
||||
success: function(html) {
|
||||
BootstrapDialog.show({
|
||||
title: 'Edit Theme',
|
||||
size: BootstrapDialog.SIZE_NORMAL,
|
||||
cssClass: 'edit-theme-dialog',
|
||||
nl2br: false,
|
||||
message: html,
|
||||
buttons: [{
|
||||
label: lang_admin_close,
|
||||
action: function (dialogItself) {
|
||||
dialogItself.close();
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: base_url + "index.php/themes/edit/" + theme_id,
|
||||
type: "post",
|
||||
success: function (html) {
|
||||
BootstrapDialog.show({
|
||||
title: "Edit Theme",
|
||||
size: BootstrapDialog.SIZE_NORMAL,
|
||||
cssClass: "edit-theme-dialog",
|
||||
nl2br: false,
|
||||
message: html,
|
||||
buttons: [
|
||||
{
|
||||
label: lang_admin_close,
|
||||
action: function (dialogItself) {
|
||||
dialogItself.close();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function editTheme(form, theme_id) {
|
||||
if (form.name.value != '') {
|
||||
$.ajax({
|
||||
url: base_url + 'index.php/themes/edit/' + theme_id,
|
||||
type: 'post',
|
||||
data: {
|
||||
'name': form.name.value,
|
||||
'foldername': form.foldername.value,
|
||||
'theme_mode': form.theme_mode.value,
|
||||
'header_logo': form.header_logo.value,
|
||||
'main_logo': form.main_logo.value,
|
||||
},
|
||||
success: function(html) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
if (formValidation()) {
|
||||
if (form.name.value != "") {
|
||||
$.ajax({
|
||||
url: base_url + "index.php/themes/edit/" + theme_id,
|
||||
type: "post",
|
||||
data: {
|
||||
name: form.name.value,
|
||||
foldername: form.foldername.value,
|
||||
theme_mode: form.theme_mode.value,
|
||||
header_logo: form.header_logo.value,
|
||||
main_logo: form.main_logo.value,
|
||||
},
|
||||
success: function (html) {
|
||||
location.reload();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function printWarning(input, warning) {
|
||||
$('#warningMessageTheme').show();
|
||||
$(input).css('border', '2px solid rgb(217, 83, 79)');
|
||||
$('#warningMessageTheme').text(warning);
|
||||
}
|
||||
|
||||
function removeWarning(input) {
|
||||
$(input).css('border', '');
|
||||
$('#warningMessageTheme').hide();
|
||||
}
|
||||
|
||||
function formValidation() {
|
||||
let name = $("#nameInput");
|
||||
let foldername = $("#foldernameInput");
|
||||
let theme_mode = $("#themeModeInput");
|
||||
let header_logo = $("#headerLogoInput");
|
||||
let main_logo = $("#mainLogoInput");
|
||||
|
||||
var unwantedCharacters = ['@', '.', '/', '\\', '$'];
|
||||
|
||||
// name
|
||||
if (name.val() == "") {
|
||||
printWarning(name, "Please enter a name for the theme.");
|
||||
name.focus();
|
||||
$(name).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(name);
|
||||
|
||||
if (unwantedCharacters.some(char => name.val().includes(char))) {
|
||||
printWarning(name, "The name contains unwanted characters. Only '()_-' are allowed.");
|
||||
name.focus();
|
||||
$(name).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(name);
|
||||
|
||||
|
||||
// foldername
|
||||
if (foldername.val() == "") {
|
||||
printWarning(foldername, "Please enter the name of the folder for that theme placed under assets/css.");
|
||||
foldername.focus();
|
||||
$(foldername).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(foldername);
|
||||
|
||||
if (unwantedCharacters.some(char => foldername.val().includes(char))) {
|
||||
printWarning(foldername, "The foldername contains unwanted characters. Only '_' and '-' are allowed.");
|
||||
foldername.focus();
|
||||
$(foldername).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(foldername);
|
||||
|
||||
|
||||
// theme_mode
|
||||
if (theme_mode.val() == "") {
|
||||
printWarning(theme_mode, "Please select the theme_mode.");
|
||||
theme_mode.focus();
|
||||
$(theme_mode).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(theme_mode);
|
||||
|
||||
|
||||
// header_logo
|
||||
if (header_logo.val() == "") {
|
||||
printWarning(header_logo, "Please enter the filename of the header_logo for that theme placed under assets/logo without the file extension '.png'");
|
||||
header_logo.focus();
|
||||
$(header_logo).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(header_logo);
|
||||
|
||||
if (unwantedCharacters.some(char => header_logo.val().includes(char))) {
|
||||
printWarning(header_logo, "The header_logo contains unwanted characters. Only '_' and '-' are allowed. Only PNG files are allowed. Remove the file extension '.png'");
|
||||
header_logo.focus();
|
||||
$(header_logo).css('border-color', 'red');
|
||||
return false;
|
||||
}
|
||||
removeWarning(header_logo);
|
||||
|
||||
|
||||
// main_logo
|
||||
if (main_logo.val() == "") {
|
||||
printWarning(main_logo, "Please enter the filename of the main_logo for that theme placed under assets/logo without the file extension '.png'");
|
||||
main_logo.focus();
|
||||
$(main_logo).css('border-color', 'red');
|
||||
return false;
|
||||
} else {
|
||||
removeWarning(main_logo);
|
||||
}
|
||||
if (unwantedCharacters.some(char => main_logo.val().includes(char))) {
|
||||
printWarning(main_logo, "The main_logo contains unwanted characters. Only '_' and '-' are allowed. Only PNG files are allowed. Remove the file extension '.png'");
|
||||
main_logo.focus();
|
||||
$(main_logo).css('border-color', 'red');
|
||||
return false;
|
||||
} else {
|
||||
removeWarning(main_logo);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#submitButton").click(function() { // Validate the form when the submit button is clicked
|
||||
formValidation();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user