ฉันจะป้องกันไม่ให้เพจรีเฟรชเมื่อกดปุ่มส่งโดยไม่มีข้อมูลใด ๆ ในฟิลด์ได้อย่างไร

การตรวจสอบคือการตั้งค่าใช้งานได้ดีฟิลด์ทั้งหมดจะเป็นสีแดง แต่จากนั้นเพจจะรีเฟรชทันที ความรู้เกี่ยวกับ 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
    /////////////////
});

คุณสามารถป้องกันไม่ให้ส่งแบบฟอร์มด้วย

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

แน่นอนในฟังก์ชั่นคุณสามารถตรวจสอบช่องว่างและหากมีสิ่งใดที่ไม่ถูกต้องe.preventDefault()จะหยุดการส่ง

ไม่มี jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

เพิ่มโค้ด onsubmit = "return false":

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

นั่นแก้ไขให้ฉัน มันจะยังคงเรียกใช้ฟังก์ชัน onClick ที่คุณระบุ

แทนที่ประเภทปุ่มเป็นbutton:

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

คุณสามารถใช้รหัสนี้สำหรับการส่งแบบฟอร์มโดยไม่ต้องรีเฟรชหน้า ฉันทำสิ่งนี้ในโครงการแล้ว

$(function () {
    $('#myFormName').on('submit',function (e) {

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

อีกวิธีหนึ่งที่ดีในการป้องกันการโหลดหน้าซ้ำเมื่อส่งโดยใช้แบบฟอร์มคือการเพิ่มreturn falseด้วยแอตทริบิวต์ onsubmit ของคุณ

<form action="#" onsubmit="yourJsFunction();return false">
    <input type="text"/>
    <input type="submit"/>
</form>

ปัญหานี้ซับซ้อนมากขึ้นเมื่อคุณให้ความเป็นไปได้แก่ผู้ใช้ 2 ในการส่งแบบฟอร์ม:

1. โดยคลิกที่ปุ่มเฉพาะกิจ
2. โดยกดปุ่ม Enter

ในกรณีเช่นนี้คุณจะต้องมีฟังก์ชั่นที่ตรวจจับคีย์ที่กดซึ่งคุณจะส่งแบบฟอร์มหากกด Enter เป็นปุ่ม

และตอนนี้มีปัญหากับ IE (ในกรณีใด ๆ รุ่น 11) หมายเหตุ: ปัญหานี้ไม่มีอยู่ใน Chrome หรือกับ FireFox!

• เมื่อคุณคลิกปุ่มส่งแบบฟอร์มจะถูกส่งหนึ่งครั้ง ละเอียด.
• เมื่อคุณกด Enter แบบฟอร์มจะถูกส่งสองครั้ง ... และ servlet ของคุณจะถูกดำเนินการสองครั้ง หากคุณไม่มีเซิร์ฟเวอร์สถาปัตยกรรม PRG (การเปลี่ยนเส้นทางการโพสต์เปลี่ยนเส้นทาง) ผลลัพธ์อาจไม่คาดคิด

แม้ว่าวิธีการแก้ปัญหาจะดูเล็กน้อย แต่ก็ใช้เวลาหลายชั่วโมงในการแก้ปัญหานี้ดังนั้นฉันหวังว่ามันอาจจะมีประโยชน์สำหรับคนอื่น ๆ โซลูชันนี้ผ่านการทดสอบเรียบร้อยแล้วสำหรับกลุ่มอื่น ๆ บน IE (v 11.0.9600.18426), FF (v 40.03) & Chrome (v 53.02785.143 m 64 บิต)

ซอร์สโค้ด HTML & 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>

ในจาวาสคริปต์บริสุทธิ์ให้ใช้: e.preventDefault()

e.preventDefault() ใช้ใน jquery แต่ใช้ได้ใน javascript

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

  //some code

  e.preventDefault();
})

คนส่วนใหญ่จะป้องกันไม่ให้ส่งแบบฟอร์มโดยการเรียกใช้event.preventDefault()ฟังก์ชัน

อีกวิธีหนึ่งคือการลบคุณลักษณะ onclick ของปุ่มและรับรหัสprocessForm()ออก.submit(function() {เป็นreturn false;สาเหตุทำให้รูปแบบที่จะไม่ส่ง นอกจากนี้ทำให้formBlaSubmit()ฟังก์ชั่นกลับบูลีนตามความถูกต้องสำหรับการใช้งานprocessForm();

katshคำตอบเหมือนกันย่อยง่ายกว่า

(โดยวิธีฉันใหม่เพื่อ stackoverflow ให้ฉันแนะนำโปรด.)

ทางออกที่ดีที่สุดคือส่งโทรฟังก์ชั่นใด ๆ ก็ตามที่คุณต้องการและคืนค่าเท็จหลังจากนั้น

onsubmit="xxx_xxx(); return false;"

โดยส่วนตัวฉันต้องการตรวจสอบความถูกต้องของแบบฟอร์มเมื่อส่งและหากมีข้อผิดพลาดให้ส่งคืนค่าเท็จ

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

    var error;

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

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

});

http://jsfiddle.net/dfyXY/

 $("#buttonID").click(function (e) {
          e.preventDefault();
         //some logic here
 }

หากคุณต้องการใช้จาวาสคริปต์ที่บริสุทธิ์แล้วตัวอย่างต่อไปนี้จะดีกว่าสิ่งอื่นใด

สมมติ :

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>

หวังว่ามันจะทำงานเพื่อคุณ !!

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

ไม่ได้ตรวจสอบวิธีการทำงาน คุณสามารถผูก (นี่) ดังนั้นมันจะทำงานเหมือน 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();

มันส่งคืนโหนดเพื่อให้คุณสามารถทำบางอย่างเช่นส่งตัวอย่างด้านบน

ห่างไกลจากความสมบูรณ์แบบ แต่ควรใช้งานได้คุณควรเพิ่มการจัดการข้อผิดพลาดหรือลบเงื่อนไขการปิดใช้งาน

เพียงใช้ "javascript:" ในแอตทริบิวต์ action ของฟอร์มหากคุณไม่ได้ใช้งาน

บางครั้งe.preventDefault ();ทำงานแล้วนักพัฒนามีความสุข แต่บางครั้งไม่ทำงานนักพัฒนาก็เศร้าแล้วฉันพบวิธีแก้ปัญหาว่าทำไมบางครั้งไม่ทำงาน

รหัสแรกใช้งานได้บางครั้ง

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

ตัวเลือกที่สองทำไมไม่ทำงาน สิ่งนี้ไม่ทำงานเนื่องจาก jquery หรือไลบรารี javascript อื่นโหลดไม่ถูกต้องคุณสามารถตรวจสอบได้ในคอนโซลว่าไฟล์ jquery และ javascript ทั้งหมดโหลดอย่างถูกต้องหรือไม่

นี่เป็นการแก้ปัญหาของฉัน ฉันหวังว่าสิ่งนี้จะเป็นประโยชน์สำหรับคุณ

ในความคิดของฉันคำตอบส่วนใหญ่พยายามแก้ปัญหาที่ถามในคำถามของคุณ แต่ฉันไม่คิดว่าเป็นวิธีที่ดีที่สุดสำหรับสถานการณ์ของคุณ

ฉันจะป้องกันไม่ให้เพจรีเฟรชเมื่อกดปุ่มส่งโดยไม่มีข้อมูลใด ๆ ในฟิลด์ได้อย่างไร

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

ขอให้สังเกต requireinputแท็กเพิ่มในตอนท้ายของแต่ละคน ผลลัพธ์จะเหมือนกัน: ไม่รีเฟรชหน้าเว็บโดยไม่มีข้อมูลใด ๆ ในฟิลด์

ฉันหวังว่านี่จะเป็นคำตอบสุดท้าย

$('#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>

 Run code snippetHide results
Expand snippet

สำหรับจาวาสคริปต์ที่บริสุทธิ์ให้ใช้วิธีการคลิกแทน

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

เพิ่งพบโซลูชันที่เรียบง่ายและใช้งานได้โดยลบออก<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>

ที่นี่มีเพียงปุ่มที่ส่งตามที่ควร

เพียงแค่ใส่ผลตอบแทนเช่นนี้:

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 (); ฟังก์ชั่นตามความต้องการ