如果在没有字段中的任何数据的情况下按下发送按钮，我将如何防止页面刷新？
验证设置正常，所有字段都变为红色，然后页面立即刷新。我对JS的了解相对基础。
特别是我认为底部的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
/////////////////
});
答案 0 :(得分：126)
您可以阻止表单提交
$("#prospects_form").submit(function(e) {
e.preventDefault();
});
当然，在函数中，您可以检查空字段，如果看起来不对，e.preventDefault()将停止提交。
答案 1 :(得分：62)
将按钮类型替换为button：
<button type="button">My Cool Button</button>
答案 2 :(得分：54)
添加此onsubmit =＆＃34;返回false＆＃34;代码：
<form name="formname" onsubmit="return false">
为我修好了。它仍将运行您指定的onClick函数
答案 3 :(得分：12)
您可以使用此代码进行表单提交，而无需刷新页面。我在我的项目中做到了这一点。
$(function () {
$('#myFormName').on('submit',function (e) {
$.ajax({
type: 'post',
url: 'myPageName.php',
data: $('#myFormName').serialize(),
success: function () {
alert("Email has been sent!");
}
});
e.preventDefault();
});
});
答案 4 :(得分：6)
当您为用户提供提交表单的可能性时，此问题会变得更加复杂：
在这种情况下，您将需要一个功能，该功能可以检测按下的键，如果按下了Enter键，您将在该键中提交表单。
现在IE出现了问题（无论如何是版本11） 备注： Chrome和FireFox都不存在此问题！
尽管解决方案看起来微不足道，但我花了很多时间来解决这个问题，所以我希望它对其他人来说可能有用。 该解决方案已成功地在IE（v 11.0.9600.18426），FF（v 40.03）和＆amp; Chrome（v 53.02785.143 m 64 bit）
源代码HTML＆amp; js在片段中。那里描述的原则。 警告：
您无法在代码段中对其进行测试，因为后期操作不是 定义并按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>
答案 5 :(得分：4)
大多数人会通过调用event.preventDefault()函数阻止表单提交。
另一种方法是删除按钮的onclick属性，并将processForm()中的代码输出到.submit(function() {，因为return false;会导致表单无法提交。此外，使formBlaSubmit()函数根据有效性返回布尔值，以便在processForm();
katsh的答案是一样的，更容易理解。
（顺便说一句，我是stackoverflow的新手，请给我指导。）
答案 6 :(得分：4)
在纯Javascript中，请使用：e.preventDefault()
e.preventDefault()用于jquery，但可以在javascript中使用。
document.querySelector(".buttonclick").addEventListener("click",
function(e){
//some code
e.preventDefault();
})
答案 7 :(得分：3)
我个人喜欢在提交时验证表单，如果有错误，只需返回false。
$('form').submit(function() {
var error;
if ( !$('input').val() ) {
error = true
}
if (error) {
alert('there are errors')
return false
}
});
答案 8 :(得分：1)
最好的解决方案是onsubmit调用任何函数，然后返回false。
onsubmit="xxx_xxx(); return false;"
答案 9 :(得分：1)
我认为，大多数答案都在试图解决您所提问题的问题，但我认为这不是解决您情况的最佳方法。
当按下发送按钮时，如果字段中没有任何数据，我将如何阻止页面刷新？
.preventDefault()确实不会刷新页面。但是我认为，只需在要填充数据的字段上使用简单的require就可以解决您的问题。
<form id="prospects_form" method="post">
<input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
<input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
<input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
<textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
</form>
请注意，在每个require的末尾添加了input标签。结果将是相同的：不刷新字段中没有任何数据的页面。
答案 10 :(得分：1)
$("#buttonID").click(function (e) {
e.preventDefault();
//some logic here
}
答案 11 :(得分：1)
如果您想使用纯Javascript，那么以下代码段将优于其他任何内容。
假设：
<强> HTML ：
key_tag.find_all('span')[1].text希望这对你有用!!
答案 12 :(得分：0)
使用JS的最佳方法是使用preventDefault（）函数。 考虑下面的代码以供参考：
function loadForm(){
var loginForm = document.querySelector('form'); //Selecting the form
loginForm.addEventListener('submit', login); //looking for submit
}
function login(e){
e.preventDefault(); //to stop form action i.e. submit
}
答案 13 :(得分：0)
<form onsubmit="myFunction(event)">
Name : <input type="text"/>
<input class="submit" type="submit">
</form>
<script>
function myFunction(event){
event.preventDefault();
//code here
}
</script>
答案 14 :(得分：0)
我希望这将是最后的答案
$('#the_form').submit(function(e){
e.preventDefault()
alert($(this).serialize())
// var values = $(this).serialize()
// logic....
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="the_form">
Label-A <input type="text" name='a'required><br>
Label-B <input type="text" name="b" required><br>
Label-C <input type="password" name="c" required><br>
Label-D <input type="number" name="d" required><br>
<input type="submit" value="Save without refresh">
</form>
答案 15 :(得分：0)
有时候 e.preventDefault（）; 可以使开发人员满意，但有时却无法工作，然后开发人员会感到悲伤，然后我找到了解决方案，有时却不起作用
第一个代码有时可行
$("#prospects_form").submit(function(e) {
e.preventDefault();
});
第二个选项为什么不起作用？ 这不起作用，因为jquery或其他javascript库无法正确加载，您可以在控制台中检查所有jquery和javascript文件是否正确加载。
这解决了我的问题。希望对您有帮助。
答案 16 :(得分：0)
if (storage.getItem('closed')) {
$("#notification").hide();
}
答案 17 :(得分：0)
防止使用表单提交时重新加载页面的一种好方法是在您的onsubmit属性中添加return false。
<form action="#" onsubmit="yourJsFunction();return false">
<input type="text"/>
<input type="submit"/>
</form>
答案 18 :(得分：0)
如果不使用动作，只需在表单的动作属性中使用“ javascript：”。
答案 19 :(得分：0)
function ajax_form(selector, obj)
{
var form = document.querySelectorAll(selector);
if(obj)
{
var before = obj.before ? obj.before : function(){return true;};
var $success = obj.success ? obj.success: function(){return true;};
for (var i = 0; i < form.length; i++)
{
var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;
var $form = form[i];
form[i].submit = function()
{
var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
var FD = new FormData($form);
/** prevent submiting twice */
if($form.disable === true)
return this;
$form.disable = true;
if(before() === false)
return;
xhttp.addEventListener('load', function()
{
$form.disable = false;
return $success(JSON.parse(this.response));
});
xhttp.send(FD);
}
}
}
return form;
}
未检查其工作原理。您还可以绑定（this），使其像jquery ajaxForm
使用方式：
ajax_form('form',
{
before: function()
{
alert('submiting form');
// if return false form shouldn't be submitted
},
success:function(data)
{
console.log(data)
}
}
)[0].submit();
它返回节点，因此您可以执行上述示例中的Submit i
到目前为止，它还算完美，但是它应该可以工作，应该添加错误处理或删除禁用条件
答案 20 :(得分：-1)
通过从我要防止发布和刷新的部分中删除<form></form>，找到了一个非常简单但可行的解决方案。
<select id="youId" name="yourName">
<select>
<option value="1</option>
<option value="2</option>
<option value="3</option>
</select>
<input id="formStockVal1" type="number"><br><br>
<form>
<button type="reset" id="stockCancel">Cancel</button>
<button type="reset" id="stockConfirm">Add</button>
</form>
这里只有Buttons提交了。
答案 21 :(得分：-1)
<div id="loginForm">
<ul class="sign-in-form">
<li><input type="text" name="username"/></li>
<li><input type="password" name="password"/></li>
<li>
<input type="submit" onclick="loginForm()" value="click" />
</li>
</ul>
</div>
<script>
function loginForm() {
document.getElementById("loginForm").click();
}
</script>
答案 22 :(得分：-2)
就像这样返回：
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>
从validate（）返回true和false;按要求运作