停止表單刷新頁面提交

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