提交时停止表单刷新页面

当按下发送button而没有任何数据在字段中时，我将如何去防止刷新页面？

validation设置工作正常，所有字段都变红，但是页面立即刷新。 我对JS的知识是比较基础的。

特别是我认为最底层的processForm()函数是'bad'。

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 ///////////////// }); 

Answer 1

您可以防止表单提交

 $("#prospects_form").submit(function(e) { e.preventDefault(); }); 

当然，在函数中，你可以检查空的字段，如果有什么不正确的， e.preventDefault()将停止提交。

Answer 2

将buttontypesreplace为button ：

 <button type="button">My Cool Button</button> 

Answer 3

添加这个onsubmit =“返回false”代码：

 <form name="formname" onsubmit="return false"> 

这为我修好了。 它仍将运行您指定的onClick函数

Answer 4

您可以使用此代码进行表单提交，而无需刷新页面。 我在我的项目中完成了这个。

 $(function () { $('#myFormName').on('submit',function (e) { $.ajax({ type: 'post', url: 'myPageName.php', data: $('#myFormName').serialize(), success: function () { alert("Email has been sent!"); } }); e.preventDefault(); }); }); 

Answer 5

大多数人会通过调用event.preventDefault()函数来阻止提交表单。

另一种方法是删除button的onclick属性，并将processForm()的代码取出为.submit(function() { return false;导致表单不提交，并且使formBlaSubmit()函数返回Boolean基于有效性，用于processForm();

katsh的答案是一样的，只是更容易消化。

（顺便说一下，我是新的stackoverflow，请给我指导。）

Answer 6

当您给用户两种提交表单的可能性时，这个问题变得更加复杂：

1. 通过点击一个特别的button
2. 按Enter键

在这种情况下，您将需要一个函数来检测按下的键，如果Enter键被击中，您将在其中提交表单。

现在问题与IE浏览器（无论如何版本11）备注：这个问题不存在与Chrome或FireFox！

• 当你点击提交button表单提交一次; 精细。
• 当你按Enter键时，表单被提交两次，你的servlet将被执行两次。 如果您没有PRG（postredirectget）架构serverside结果可能是意外的。

即使解决scheme看起来微不足道，但花了我好几个小时才能解决这个问题，所以我希望对其他人来说可能是有用的。 此解决scheme已成功通过IE（v 11.0.9600.18426），FF（v 40.03）和Chrome（v 53.02785.143 m 64位）testing，

源代码HTML＆js位于代码片段中。 那里描述的原则。 警告：

你不能在代码片段中testing它，因为post操作没有被定义，按Enter键可能会干扰到stackoverflow。

如果您遇到了这个问题，那么只需将js代码复制/粘贴到您的环境中，并将其调整到您的上下文中即可。

 /* * inForm points to the form */ var inForm = document.getElementById('idGetUserFrm'); /* * IE submits the form twice * To avoid this the boolean isSumbitted is: * 1) initialized to false when the form is displayed 4 the first time * Remark: it is not the same event as "body load" */ var isSumbitted = false; function checkEnter(e) { if (e && e.keyCode == 13) { inForm.submit(); /* * 2) set to true after the form submission was invoked */ isSumbitted = true; } } function onSubmit () { if (isSumbitted) { /* * 3) reset to false after the form submission executed */ isSumbitted = false; return false; } } 

 <!DOCTYPE html> <html> <body> <form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()"> First name:<br> <input type="text" name="firstname" value="Mickey"> <input type="submit" value="Submit"> </form> </body> </html> 

Answer 7

我个人喜欢validation提交表单，如果有错误，只是返回false。

 $('form').submit(function() { var error; if ( !$('input').val() ) { error = true } if (error) { alert('there are errors') return false } }); 

http://jsfiddle.net/dfyXY/

Answer 8

只要把这样的回报：

 function validate() { var username=document.getElementById('username').value; if(username=="") { return false; } if(username.length<5&&username.length<15) { alert("Length should between 5 to 15 characters"); return false; } return true; } 

 body{ padding: 0px; margin:0px; } input{ display: block; margin-bottom:10px; height:25px; width:200px; } input[type="submit"]{ margin:auto; } label{ display:block; margin-bottom:10px; } form{ width:500px; height:500px; border:1px solid green; padding:10px; margin:auto; top:0; bottom:0; left:0; right:0; position:absolute; } .labels{ width: 35%; box-sizing:border-box; display: inline-block; } .inputs{ width: 63%; box-sizing:border-box; padding:10px; display: inline-block; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FORM VALIDATION</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <form action="#"> <div class="labels"> <label>Name</label> <label>Email</label> </div> <div class="inputs"> <input type="text" name="username" id="username" required> <input type="text" name="email" id="email" required> </div> <input type="submit" value="submit" onclick="return validate();"> </form> </body> </html>