173
rated 0 times
[
180]
[
7]
/ answers: 1 / hits: 28241
/ 10 Years ago, wed, february 19, 2014, 12:00:00
I looked all over and all I could find was about jQuery.
With much help from the great minds here at SO I've finally got my form validating (it's only client side right now, but that because it's an assignment). I need to now submit the form to a PHP file using AJAX.
My requirements are to verify that it was called via AJAX, verify all required fields have values and return a success status including the server time it was processed.
The form action is empty right now for testing but will eventually call form.php with the code below.
HTML
<form id=contact name=contact onsubmit=return validateFormOnSubmit(this) action= method=post>
<div>
<label>First Name</label>
<input placeholder=First Name type=text name=name id=name tabindex=1 autofocus />
<div id=name-error class=error></div>
</div>
<div>
<label>Nickname</label>
<input placeholder=Nickname type=text name=nickname id=nickname tabindex=2 autofocus />
</div>
<div>
<label>Email</label>
<input placeholder=Email type=email name=email id=email tabindex=3 autofocus />
<div id=email-error class=error></div>
</div>
<div>
<label>Phone</label>
<input placeholder=Phone type=tel name=phone id=phone tabindex=4 autofocus />
<div id=phone-error class=error></div>
</div>
<div>
<label>I prefer</label>
<input type=radio name=pet id=Dogs tabindex=5 autofocus />Dogs
<input type=radio name=pet id=Cats tabindex=6 autofocus />Cats
<input type=radio name=pet id=Neither tabindex=7 autofocus />Neither
<div id=pet-error class=error></div>
</div>
<div>
<label>My favorite number between 1 and 50</label>
<input placeholder=Favorite number between 1 and 50 type=text name=number id=number tabindex=8 autofocus />
<div id=number-error class=error></div>
</div>
<div>
<label>Disclaimer</label>
<input type=checkbox name=disclaimer id=disclaimer tabindex=9 autofocus />I confirm that all the above information is true.
<div id=disclaimer-error class=error></div>
</div>
<div>
<button type=submit name=submit id=submit tabindex=10>Send</button>
</div>
</form>
JS
function validateFormOnSubmit(contact) {
reason = ;
reason += validateName(contact.name);
reason += validateEmail(contact.email);
reason += validatePhone(contact.phone);
reason += validatePet(contact.pet);
reason += validateNumber(contact.number);
reason += validateDisclaimer(contact.disclaimer);
console.log(reason);
if (reason.length > 0) {
return false;
} else {
return false;
}
}
// validate required fields
function validateName(name) {
var error = ;
if (name.value.length == 0) {
name.style.background = 'Red';
document.getElementById('name-error').innerHTML = The required field has not been filled in;
var error = 1;
} else {
name.style.background = 'White';
document.getElementById('name-error').innerHTML = '';
}
return error;
}
// validate email as required field and format
function trim(s) {
return s.replace(/^s+|s+$/, '');
}
function validateEmail(email) {
var error = ;
var temail = trim(email.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+.[^@]*ww$/;
var illegalChars = /[()<>,;:\\[]]/;
if (email.value == ) {
email.style.background = 'Red';
document.getElementById('email-error').innerHTML = Please enter an email address.;
var error = 2;
} else if (!emailFilter.test(temail)) { //test email for illegal characters
email.style.background = 'Red';
document.getElementById('email-error').innerHTML = Please enter a valid email address.;
var error = 3;
} else if (email.value.match(illegalChars)) {
email.style.background = 'Red';
var error = 4;
document.getElementById('email-error').innerHTML = Email contains invalid characters.;
} else {
email.style.background = 'White';
document.getElementById('email-error').innerHTML = '';
}
return error;
}
// validate phone for required and format
function validatePhone(phone) {
var error = ;
var stripped = phone.value.replace(/[().- ]/g, '');
if (phone.value == ) {
document.getElementById('phone-error').innerHTML = Please enter a phone number;
phone.style.background = 'Red';
var error = '6';
} else if (isNaN(parseInt(stripped))) {
var error = 5;
document.getElementById('phone-error').innerHTML = The phone number contains illegal characters.;
phone.style.background = 'Red';
} else if (stripped.length < 10) {
var error = 6;
document.getElementById('phone-error').innerHTML = The phone number is too short.;
phone.style.background = 'Red';
} else {
phone.style.background = 'White';
document.getElementById('phone-error').innerHTML = '';
}
return error;
}
function validatePet(pet) {
if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) {
document.getElementById('pet-error').innerHTML = Pet required;
var error = 2;
} else {
document.getElementById('pet-error').innerHTML = '';
}
return error;
}
function validateNumber(number) {
var num = document.forms[contact][number];
var y = num.value;
if (!isNaN(y)) {
//alert('va');
if (y < 0 || y > 50) {
//Wrong
number.style.background = 'Red';
document.getElementById(number-error).innerHTML = Must be between 0 and 50.;
var error = 10;
} else {
//Correct
number.style.background = 'White';
document.getElementById(number-error).innerHTML = ;
}
return error;
} else {
document.getElementById(number-error).innerHTML = Must be a number.;
var error = 3;
}
return error;
}
function validateDisclaimer(disclaimer) {
var error = ;
if (document.getElementById(disclaimer).checked === false) {
document.getElementById('disclaimer-error').innerHTML = Required;
var error = 4;
} else {
document.getElementById('disclaimer-error').innerHTML = '';
}
return error;
}
PHP
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$from = 'From: TangledDemo';
$to = '[email protected]';
$subject = 'Hello';
$message = This is a message.;
if ($_POST['submit']) {
if (mail ($to, $subject, $message)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
thanks!
More From » php
