停止表单刷新页面提交

Question

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

验证设置正常，所有字段都变红，但是页面立即刷新。我对JS的知识是相对基础的。我想函数底部是'坏'。

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

替换按钮类型button：

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

Answer 3

个人而言，我喜欢上验证提交表单，如果有错误，就返回false。

$('form').submit(function() { 

    var error; 

    if (!$('input').val()) { 
     error = true 
    } 

    if (error) { 
     alert('there are errors') 
     return false 
    } 

}); 

http://jsfiddle.net/dfyXY/

Answer 4

大多数人会阻止从形式通过调用event.preventDefault()功能提交。

另一种方法是删除按钮的onclick属性，并将processForm()中的代码取出为.submit(function() {，因为return false;导致表单不提交。另外，使formBlaSubmit()函数根据有效性返回布尔值，用于processForm();

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

（顺便说一句，我是新来的StackOverflow，给我的指导，请。）

Answer 5

您可以使用表单提交的代码不需要刷新页面。我在我的项目中完成了这项工作。

$(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 6

添加此的onsubmit = “返回false” 代码：

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

问题解决了我。它仍然会运行的onClick函数指定

Answer 7

只是把回报这样的：

function validate() 
 
{ 
 

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

body{ 
 
\t padding: 0px; 
 
\t margin:0px; 
 
} 
 

 
input{ 
 
\t display: block; 
 
\t margin-bottom:10px; 
 
\t height:25px; 
 
\t width:200px; 
 
} 
 

 
input[type="submit"]{ 
 
\t margin:auto; 
 
} 
 

 
label{ 
 
\t display:block; 
 
\t margin-bottom:10px; 
 
} 
 

 
form{ 
 
\t \t width:500px; 
 
\t \t height:500px; 
 
\t \t border:1px solid green; 
 
\t \t padding:10px; 
 
\t \t margin:auto; 
 
\t \t top:0; 
 
\t \t bottom:0; 
 
\t \t left:0; 
 
\t \t right:0; 
 
\t \t position:absolute; \t \t 
 
} 
 

 
.labels{ 
 
\t width: 35%; 
 
\t box-sizing:border-box; 
 
\t display: inline-block; 
 
} 
 

 
.inputs{ 
 
\t width: 63%; 
 
\t box-sizing:border-box; 
 
\t padding:10px; 
 
\t display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>FORM VALIDATION</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 

 
\t <script type="text/javascript" src="script.js"></script> 
 
</head> 
 

 
<body> 
 
\t <form action="#"> 
 
\t \t <div class="labels"> 
 
\t \t \t <label>Name</label> 
 
\t \t \t <label>Email</label> 
 
\t \t </div> 
 

 
\t \t <div class="inputs"> 
 
\t \t \t <input type="text" name="username" id="username" required> 
 
\t \t \t <input type="text" name="email" id="email" required> 
 
\t \t </div> 
 
\t \t 
 
\t \t <input type="submit" value="submit" onclick="return validate();"> 
 
\t </form> 
 
</body> 
 

 
</html>

，则返回true和验证假（）;功能按规定

Answer 8

当你给用户2点的可能性提交表单，这个问题变得更加复杂：通过点击一个特设按钮

通过敲击回车

1. 关键

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

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

• 当您点击提交按钮表单提交一次;精细。
• 当您按Enter键时，表单被提交两次...并且您的servlet将被执行两次。如果您没有PRG（发布重定向获取）体系结构serverside结果可能是意外的。

即使解决方案看起来微不足道，我花了很多时间来解决这个问题，所以我希望它可能对其他人有用。 这种解决方案已经成功地测试，除其他外，IE（ⅴ11.0.9600.18426），FF（V 40.03）&铬（ⅴ53.02785.143米64位）

的源代码HTML & JS都在代码段。原理在那里描述。 警告：

你不能测试它的片段，因为后期操作不 定义和打回车键可能与计算器地干扰。

如果您遇到此问题，那么只需将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 9

如果你想使用纯JavaScript，然后下面的代码片段会比什么都好。

假设：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Form Without Submiting With Pure JS</title> 
     <script type="text/javascript"> 
      window.onload = function(){ 
       /** 
       * Just Make sure to return false so that your request will not go the server script 
       */ 
       document.getElementById('simple_form').onsubmit = function(){ 
        // After doing your logic that you want to do 

        return false 
       } 
      } 
     </script> 
    </head> 
    <body> 

    </body> 
</html> 
<form id="simple_form" method="post"> 
    <!-- Your Inputs will go here --> 
    <input type="submit" value="Submit Me!!" /> 
</form> 

希望如此，它为你的作品！

Answer 10

对于纯JavaScript中使用的点击方法，而不是

<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> 

Answer 11

在纯JavaScript，使用：e.preventDefault()

e.preventDefault()用于jQuery中，但在JavaScript中工作。

document.querySelector(".buttonclick").addEventListener("click", 
function(e){ 

    //some code 

    e.preventDefault(); 
})