jessebrault/jb-ssg-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contact validation and messages.

Browse Source
This commit is contained in:
JesseBrault0709 2024-06-09 14:46:57 +02:00
parent c0164c8137
commit 0aa17eef7f
3 changed files with 123 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
View File

@ -8,33 +8,33 @@ import com.jessebrault.site.StandardPage
<article class="contact"> <article class="contact">
<h1>Contact</h1> <h1>Contact</h1>
<p>Please use the following form to contact Jesse Brault directly.</p> <p>Please use the following form to contact Jesse Brault directly.</p>
<form class="contact"> <form id="contact-form" class="contact" novalidate>
<div class="control"> <div class="control">
<label for="name">Name</label> <label for="name-input">Name</label>
<input id="name" name="name" type="text" /> <input id="name-input" name="name" type="text" required />
<p id="name-message" class="message">&nbsp;</p> <p id="name-message" class="message error">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<label for="institution">Institution</label> <label for="institution-input">Institution</label>
<input id="institution" name="institution" type="text" /> <input id="institution-input" name="institution" type="text" />
<p id="institution-message" class="message">&nbsp;</p> <p id="institution-message" class="message error">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<label for="email">Email</label> <label for="email-input">Email</label>
<input id="email" name="email" type="email" /> <input id="email-input" name="email" type="email" required />
<p id="email-message" class="message">&nbsp;</p> <p id="email-message" class="message error">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<label for="message">Message</label> <label for="message-input">Message</label>
<textarea id="message" name="message"></textarea> <textarea id="message-input" name="message" required></textarea>
<p id="message-message" class="message">&nbsp;</p> <p id="message-message" class="message error">&nbsp;</p>
</div> </div>
<div class="control"> <div class="control">
<input type="submit" /> <input id="submit-input" type="submit" />
<p id="submit-message" class="message">&nbsp;</p> <p id="submit-message" class="message">&nbsp;</p>
</div> </div>
</form> </form>

133
static/contact.js
View File

@ -1,37 +1,104 @@
window.addEventListener('load', function () { window.addEventListener('load', () => {
const contactForm = document.querySelector('form.contact') const contactForm = document.getElementById('contact-form')
contactForm.addEventListener('submit', function (submitEvent) {
submitEvent.preventDefault() const nameMessage = document.getElementById('name-message')
const formData = new FormData(contactForm) const emailMessage = document.getElementById('email-message')
const toSend = { const messageMessage = document.getElementById('message-message')
name: formData.get('name'), const submitMessage = document.getElementById('submit-message')
email: formData.get('email'),
institution: formData.get('institution'), const nameInput = document.getElementById('name-input')
message: formData.get('message') const emailInput = document.getElementById('email-input')
const messageInput = document.getElementById('message-input')
const submitInput = this.document.getElementById('submit-input')
const validateName = () => {
if (nameInput.validity.valid) {
nameMessage.innerHTML = '&nbsp;'
nameInput.classList.remove('invalid')
} else {
nameMessage.innerText = 'Name is required.'
nameInput.classList.add('invalid')
} }
fetch('https://api.jessebrault.com/contact/jessebrault', { submitMessage.innerHTML = '&nbsp;'
body: JSON.stringify(toSend), }
headers: {
'Content-type': 'application/json' nameInput.addEventListener('focusout', validateName)
}, nameInput.addEventListener('input', validateName)
method: 'POST' // TODO: signal
}) const validateEmail = () => {
.then(function (response) { if (emailInput.validity.valid) {
if (response.status === 400) { emailMessage.innerHTML = '&nbsp;'
response.json().then(function (body) { emailInput.classList.remove('invalid')
body.errors.forEach(function ({ field, message }) { } else if (emailInput.validity.valueMissing) {
const element = document.getElementById(`${field}-message`) emailMessage.innerText = 'Email is required.'
element.innerText = message emailInput.classList.add('invalid')
}) } else if (emailInput.validity.typeMismatch) {
}) emailMessage.innerText = 'Email must be a valid email.'
} else if (response.status === 500) { emailInput.classList.add('invalid')
const submitMessageElement = document.getElementById('submit-message') }
submitMessageElement.innerText = 'There was internal server error. Please try again later.' submitMessage.innerHTML = '&nbsp;'
} else { }
const submitMessageElement = document.getElementById('submit-message')
submitMessageElement.innerText = 'Your message was successfully sent!' emailInput.addEventListener('focusout', validateEmail)
} emailInput.addEventListener('input', validateEmail)
const validateMessage = () => {
if (messageInput.validity.valid) {
messageMessage.innerHTML = '&nbsp;'
messageInput.classList.remove('invalid')
} else {
messageMessage.innerText = 'Message is required.'
messageInput.classList.add('invalid')
}
submitMessage.innerHTML = '&nbsp;'
}
messageInput.addEventListener('focusout', validateMessage)
messageInput.addEventListener('input', validateMessage)
contactForm.addEventListener('submit', submitEvent => {
submitEvent.preventDefault()
validateName()
validateEmail()
validateMessage()
if (nameInput.validity.valid && emailInput.validity.valid && messageInput.validity.valid) {
const formData = new FormData(contactForm)
const toSend = {
name: formData.get('name'),
email: formData.get('email'),
institution: formData.get('institution'),
message: formData.get('message')
}
submitInput.disabled = true
submitMessage.innerText = 'Sending...'
fetch('https://api.jessebrault.com/contact/jessebrault', {
body: JSON.stringify(toSend),
headers: {
'Content-type': 'application/json'
},
method: 'POST'
}) })
.catch(function (error) {}) .then(function (response) {
if (response.status === 400) {
response.json().then(body => {
body.errors.forEach(({ field, message }) => {
const element = document.getElementById(`${field}-message`)
element.innerText = message
})
})
} else if (response.status === 500) {
submitMessage.classList.add('error')
submitMessage.innerText = 'There was internal server error. Please try again later.'
} else {
submitMessage.classList.remove('error')
submitMessage.innerText = 'Your message was successfully sent!'
setTimeout(() => {
submitMessage.innerHTML = '&nbsp;'
}, 5000)
}
submitInput.disabled = false
})
.catch(error => {})
}
}) })
}) })

9
static/main.css
View File

@ -416,10 +416,19 @@ form.contact {
cursor: pointer; cursor: pointer;
} }
.contact .control input.invalid,
.contact .control textarea.invalid {
border: 1px solid red;
}
.contact .control .message { .contact .control .message {
margin: 0; margin: 0;
} }
.contact .control .error {
color: red;
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
nav ul { nav ul {
position: absolute; position: absolute;