#93 Added client-side validations
Keith Irwin
parent
c93653aa74
commit
02142f2cf4
|
|
@ -2,28 +2,28 @@ input, textarea {
|
|||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
#subject, #message {
|
||||
#subject-input, #message-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
#name, #email {
|
||||
#name-input, #email-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width:600px) {
|
||||
#name, #email {
|
||||
#name-input, #email-input {
|
||||
min-width: 45%;
|
||||
}
|
||||
#name {
|
||||
#name-input {
|
||||
float: left;
|
||||
}
|
||||
#email {
|
||||
#email-input {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
button.btn {
|
||||
#submit-button {
|
||||
display: block;
|
||||
margin: auto;
|
||||
min-width: 60%;
|
||||
|
|
|
|||
|
|
@ -136,3 +136,12 @@ form input[type="checkbox"]:focus, form input[type="radio"]:focus {
|
|||
form .btn {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
/* Help */
|
||||
.help {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,12 +59,3 @@
|
|||
#submit-group .main {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Help */
|
||||
.help {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -3,6 +3,82 @@
|
|||
|
||||
import css from '../css/contact.css';
|
||||
|
||||
window.onSubmit = function() {
|
||||
$('#contact-form').submit();
|
||||
var validEmail, validMessage;
|
||||
|
||||
// Validate email addresses
|
||||
function validateEmail(email) {
|
||||
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
// Validate form
|
||||
function validateForm(input) {
|
||||
|
||||
// Check if email is valid
|
||||
if (input==='email') {
|
||||
if (!validateEmail($('#email-input').val())) {
|
||||
validEmail = false;
|
||||
$('#email-help').show();
|
||||
$('#submit-button').prop('disabled',true).prop('title',"You need to enter a valid email address. ");
|
||||
}
|
||||
else {
|
||||
validEmail = true;
|
||||
$('#email-help').hide();
|
||||
validateForm();
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure message has been entered
|
||||
if (input==='message') {
|
||||
if ($('#message-input').val()==='') {
|
||||
validMessage = false;
|
||||
$('#message-help').show();
|
||||
$('#submit-button').prop('disabled',true).prop('title',"You need to enter a message. ");
|
||||
}
|
||||
else {
|
||||
validMessage = true;
|
||||
$('#message-help').hide();
|
||||
validateForm();
|
||||
}
|
||||
}
|
||||
|
||||
// Recheck whole form
|
||||
else {
|
||||
if (validEmail && validMessage) {
|
||||
$('#submit-button').prop('disabled',false).prop('title',"Click here to send your message. ");
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
$('#submit-button').prop('disabled',true).prop('title',"Edit the form before clicking send. ");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Initial check
|
||||
$(function() {
|
||||
|
||||
if ( validateEmail($('#email-input').val()) ) { validEmail = true; }
|
||||
else { validEmail = false; }
|
||||
|
||||
if ( !$('#message-input').val()==='' ) { validMessage = true; }
|
||||
else { validMessage = false; }
|
||||
|
||||
// Use a one-second timout because reCaptcha re-enables the button by default
|
||||
setTimeout(validateForm,1000);
|
||||
|
||||
});
|
||||
|
||||
// Submit form (reCaptcha callback)
|
||||
window.onSubmit = function() {
|
||||
if (validateForm()) { $('#contact-form').submit(); }
|
||||
};
|
||||
|
||||
// Form change listener
|
||||
$('#email-input').change(function(){
|
||||
validateForm('email');
|
||||
});
|
||||
$('#message-input').change(function(){
|
||||
validateForm('message');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
|
||||
{% block javascript %}
|
||||
{{super()}}
|
||||
<script type="application/javascript" src="/static/js/.form.bun.js"></script>
|
||||
<script type="application/javascript" src="/static/js/.contact.bun.js"></script>
|
||||
<script type="application/javascript" src="/static/js/.form.bun.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
|
|
@ -19,13 +19,15 @@
|
|||
|
||||
<form id='contact-form' role="form" method="POST">
|
||||
|
||||
<input name="subject" id='subject' type="text" maxlength="160" placeholder="Subject">
|
||||
<textarea name="message" id='message' rows="10" maxlength="5000" placeholder="Message" required>{{message}}</textarea>
|
||||
<input id='subject-input' name="subject" id='subject' type="text" maxlength="160" placeholder="Subject">
|
||||
<p id='message-help' class='red help'>You need to enter a message. </p>
|
||||
<textarea id='message-input' name="message" id='message' rows="10" maxlength="5000" placeholder="Message" required>{{message}}</textarea>
|
||||
|
||||
<input name="name" id='name' type="text" maxlength="160" value="{{user.name}}" placeholder="Your name">
|
||||
<input name="email" id='email' type="email" maxlength="160" value="{{user.email}}" placeholder="Your email" required>
|
||||
<input id='name-input' name="name" id='name' type="text" maxlength="160" value="{{user.name}}" placeholder="Your name">
|
||||
<p id='email-help' class='red help'>You need to enter a valid email. </p>
|
||||
<input id='email-input' name="email" id='email' type="email" maxlength="160" value="{{user.email}}" placeholder="Your email" required>
|
||||
|
||||
<button class='g-recaptcha main btn' data-sitekey="{{sitekey}}" data-callback="onSubmit">Submit</button>
|
||||
<button id='submit-button' class='g-recaptcha main btn' data-sitekey="{{sitekey}}" data-callback="onSubmit">Submit</button>
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue