当按下发送按钮而字段中没有任何数据时,如何防止页面刷新?
验证设置工作正常,所有字段均变为红色,但随后页面立即刷新。我对JS的知识比较基础。
我特别认为processForm()底部的功能是“不良”。
processForm()
的HTML
<form id="prospects_form" method="post"> <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" /> <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" /> <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" /> <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea> <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button> <div id="form_validation"> <span class="form_captcha_code"></span> <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" /> </div> <div class="clearfix"></div> </form>
JS
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\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,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// });
您可以阻止表单提交
$("#prospects_form").submit(function(e) { e.preventDefault(); });
当然,在该函数中,您可以检查是否有空白字段,如果看起来不正确,e.preventDefault()将停止提交。
e.preventDefault()
没有jQuery:
var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm);