我四处张望,我所能找到的就是关于jQuery的信息。
在SO的伟大思想者的大力帮助下,我终于完成了表单验证(目前仅是客户端,但这是因为它是任务)。我现在需要使用AJAX将表单提交到PHP文件。
我的要求是验证它是通过AJAX调用的,验证所有必填字段都具有值,并返回成功状态,包括处理它的服务器时间。
JS小提琴
form动作现在是空的,无法进行测试,但最终将使用下面的代码调用form.php。
的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 = /^[^@]+@[^@.]+\.[^@]*\w\w$/; 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 = 'myemail@domain.com'; $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>'; } } ?>
谢谢!
您可以通过以下方式提交表单Ajax:
Ajax
function submitFormAjax() { let xmlhttp= window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) alert(this.responseText); // Here is the response } let name = document.getElementById('name').innerHTML; let email = document.getElementById('email').innerHTML; xmlhttp.open("GET","your_url.php?name=" + name + "&email=" + email, true); xmlhttp.send(); }
此示例正在使用GET,但您也可以使用POST:
GET
POST
xmlhttp.open("POST","your_url.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("name=" + name + "&email=" + email);
注意:
完成submitFormAjax()后,您必须在validateFormOnSubmit没有错误的情况下致电,这里:
submitFormAjax()
validateFormOnSubmit
if (reason.length == 0) { // Show some loading image and submit form submitFormAjax(); } else { return false; }