137 lines
4.2 KiB
Plaintext
137 lines
4.2 KiB
Plaintext
<br>
|
|
<form id="publishForm" method="POST" novalidate>
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<ul class="tabs">
|
|
<li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
|
|
<li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>
|
|
<li class="tab col s3"><a href="#publishLocation">Lokacija</a></li>
|
|
<li class="tab col s3"><a href="#publishEnd">Kraj</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div id="publishBasicData" class="col s12">
|
|
<%- include("./publishBasicData.ejs") %>
|
|
</div>
|
|
<div id="publishAdditionalData" class="col s12">
|
|
<%- include("./publishAdditionalData.ejs") %>
|
|
</div>
|
|
<div id="publishLocation" class="col s12">
|
|
<%- include("./publishLocation.ejs") %>
|
|
</div>
|
|
<div id="publishEnd" class="col s12">
|
|
<%- include("./publishEnd.ejs") %>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
$('.tabs').tabs();
|
|
|
|
const validateEmail = $email => {
|
|
const regexEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
|
|
return regexEmail.test($email);
|
|
}
|
|
|
|
const form = document.querySelector("#publishForm");
|
|
|
|
function showErrors(form, errors) {
|
|
// We loop through all the inputs and show the errors for that input
|
|
//_.each(form.querySelectorAll("input[name], select[name]"), function(input) {
|
|
// Since the errors can be null if no errors were found we need to handle
|
|
// that
|
|
showErrorsForInput(input, errors && errors[input.name]);
|
|
// });
|
|
}
|
|
|
|
// Shows the errors for a specific input
|
|
function showErrorsForInput(input, errors) {
|
|
// This is the root of the input
|
|
var formGroup = closestParent(input.parentNode, "form-group"),
|
|
// Find where the error messages will be insert into
|
|
messages = formGroup.querySelector(".messages");
|
|
// First we remove any old messages and resets the classes
|
|
resetFormGroup(formGroup);
|
|
// If we have errors
|
|
if (errors) {
|
|
// we first mark the group has having errors
|
|
formGroup.classList.add("has-error");
|
|
// then we append all the errors
|
|
$.each(errors, function(error) {
|
|
addError(messages, errors[error]);
|
|
});
|
|
} else {
|
|
// otherwise we simply mark it as success
|
|
formGroup.classList.add("has-success");
|
|
}
|
|
}
|
|
|
|
// Recusively finds the closest parent that has the specified class
|
|
function closestParent(child, className) {
|
|
if (!child || child == document) {
|
|
return null;
|
|
}
|
|
if (child.classList.contains(className)) {
|
|
return child;
|
|
} else {
|
|
return closestParent(child.parentNode, className);
|
|
}
|
|
}
|
|
|
|
function resetFormGroup(formGroup) {
|
|
formGroup.classList.remove("has-error");
|
|
formGroup.classList.remove("has-success");
|
|
$.each(formGroup.querySelectorAll(".help-block.error"), function(el) {
|
|
el.parentNode.removeChild(el);
|
|
});
|
|
}
|
|
|
|
// Adds the specified error with the following markup
|
|
// <p class="help-block error">[message]</p>
|
|
function addError(messages, error) {
|
|
var block = document.createElement("p");
|
|
block.classList.add("help-block");
|
|
block.classList.add("error");
|
|
block.innerText = error;
|
|
messages.appendChild(block);
|
|
}
|
|
|
|
$("#submit").click( function () {
|
|
const mapBounds = map.getBounds();
|
|
const currentLocation = marker.getPosition();
|
|
|
|
|
|
$("#north").val(mapBounds.getNorthEast().lat());
|
|
$("#south").val(mapBounds.getSouthWest().lat());
|
|
$("#east").val(mapBounds.getNorthEast().lng());
|
|
$("#west").val(mapBounds.getSouthWest().lng());
|
|
|
|
$("#lat").val(currentLocation.lat());
|
|
$("#lng").val(currentLocation.lng());
|
|
|
|
$("#locationInput").val(
|
|
document.getElementById("autocompleteInput").value
|
|
);
|
|
|
|
|
|
const errors = validateEmail($("#email").val());
|
|
|
|
if (errors) {
|
|
$("#publishForm").submit();
|
|
}
|
|
else {
|
|
const errorMsgs = ["Unesite validan email."];
|
|
const email = document.querySelector("#email");
|
|
|
|
showErrorsForInput( email, errorMsgs)
|
|
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
</script> |