Alanlarda veri olmadan gönder düğmesine basarken sayfanın yenilenmesini nasıl önleyebilirim?

Doğrulama iyi çalışıyor, tüm alanlar kırmızı renkte yanıyor ancak sayfa hemen yenileniyor. JS bilgim nispeten basit.

Özellikle processForm()alt kısımdaki fonksiyonun 'kötü' olduğunu düşünüyorum .

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

Formun gönderilmesini engelleyebilirsiniz

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

Tabii ki, fonksiyonda boş alanları kontrol edebilirsiniz ve herhangi bir şey doğru görünmüyorsa, e.preventDefault() durduracaktır.

JQuery olmadan:

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

Bu onsubmit = "return false" kodunu ekleyin:

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

Bu benim için sorunumu çözdü. Yine de belirttiğiniz onClick işlevini çalıştırır

Düğme türünü şu şekilde değiştirin button:

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

Bu kodu, sayfayı yenilemeden form göndermek için kullanabilirsiniz. Bunu projemde yaptım.

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

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

Form kullanarak gönderim yaparken sayfanın yeniden yüklenmesini önlemenin en iyi yollarından biri return false, onsubmit özelliğinizle eklemektir .

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

Bu sorun, kullanıcıya formu göndermek için 2 olasılık verdiğinizde daha karmaşık hale gelir:

1. özel bir düğmeyi tıklayarak
2. Enter tuşuna basarak

Böyle bir durumda, Enter tuşuna basıldığında formu göndereceğiniz basılan tuşu algılayan bir işleve ihtiyacınız olacaktır.

Ve şimdi IE ile ilgili sorun geliyor (her durumda sürüm 11) Not: Bu sorun Chrome'da veya FireFox'ta mevcut değildir!

• Gönder düğmesine tıkladığınızda form bir kez gönderilir; ince.
• Enter tuşuna bastığınızda, form iki kez gönderilir ... ve sunucu uygulamanız iki kez yürütülür. PRG (post redirect get) mimarisi sunucularınız yoksa, sonuç beklenmedik olabilir.

Çözüm önemsiz görünse de, bu sorunu çözmek için bana saatlerce sürüyor, bu yüzden umarım diğer insanlar için yararlı olabilir. Bu çözüm diğerleri arasında IE (v 11.0.9600.18426), FF (v 40.03) ve Chrome (v 53.02785.143 m 64 bit) üzerinde başarıyla test edilmiştir.

Kaynak kodu HTML ve js snippet'indedir. İlke burada açıklanmaktadır. Uyarı:

Gönderi işlemi tanımlanmadığından ve Enter tuşuna basmak yığın akışı ile etkileşime girebileceğinden snippet'te test edemezsiniz.

Bu sorunla karşılaşırsanız, js kodunu ortamınıza kopyalayıp yapıştırın ve bağlamınıza uyarlayın.

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

Saf Javascript'te şunu kullanın: e.preventDefault()

e.preventDefault() jquery kullanılır ama javascript çalışır.

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

  //some code

  e.preventDefault();
})

Çoğu kişi, event.preventDefault()işlevi çağırarak formun gönderilmesini önler .

Başka araçlar kodu düğmesinin onclick özelliğini kaldırmak ve elde etmektir processForm()içine dışarı .submit(function() {olarak return false;göndermeyin için nedenleri formu. Ayrıca, formBlaSubmit()işlevlerin,processForm();

katshcevabı aynı, sindirimi daha kolay.

(Bu arada, stackoverflow'da yeniyim, lütfen bana rehberlik et.)

En iyi çözüm, herhangi bir işlevi istediğiniz gibi çağırıp ondan sonra false döndürmektir.

onsubmit="xxx_xxx(); return false;"

Şahsen ben formu teslim onaylamak istiyorum ve hata varsa, sadece yanlış döndürün.

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

Pure Javascript kullanmak istiyorsanız, aşağıdaki kod parçası her şeyden daha iyi olacaktır.

Varsayalım :

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>

Umarım sizin için çalışır !!

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

Nasıl çalıştığını kontrol etmedim. Ayrıca (bu) bağlayabilirsiniz, böylece jquery ajax gibi çalışacaktır

gibi kullanın:

ajax_form('form',
{
    before: function()
    {
        alert('submiting form');
        // if return false form shouldn't be submitted
    },
    success:function(data)
    {
        console.log(data)
    }
}
)[0].submit();

düğümleri döndürür, böylece yukarıdaki örnek i göndermek gibi bir şey yapabilirsiniz

mükemmellikten çok uzak ama işe yarıyorsa, hata işleme eklemeli veya devre dışı bırakma koşulunu kaldırmalısınız

İşlem kullanmıyorsanız, formun işlem özelliğinde "javascript:" ifadesini kullanmanız yeterlidir.

Bazen e.preventDefault ();işler sonra geliştiriciler mutlu ama bazen çalışmıyor sonra geliştiriciler üzgün sonra neden bazen çalışmıyor çalışmıyor çözüm buldum

ilk kod bazen işe yarar

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

ikinci seçenek neden çalışmıyor? Bu jquery veya diğer javascript kitaplığı düzgün yüklenmiyor çünkü tüm jquery ve javascript dosyalarının düzgün yüklendiğini veya yüklenmediğini konsolda kontrol edebilirsiniz.

Bu benim sorunumu çözdü. Umarım bu sizin için yararlı olacaktır.

Benim düşünceme göre, çoğu yanıt sorunuzda sorulan sorunu çözmeye çalışıyor, ancak bunun senaryo için en iyi yaklaşım olduğunu düşünmüyorum.

Alanlarda veri olmadan gönder düğmesine basarken sayfanın yenilenmesini nasıl önleyebilirim?

A .preventDefault()gerçekten sayfayı yenilemez. Ancak requireveri ile doldurulmasını istediğiniz alanlardaki basit bir sorunun sorununuzu çözeceğini düşünüyorum.

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

requireHer birinin sonuna eklenen etikete dikkat edin input. Sonuç aynı olacaktır: Alanlarda veri olmadan sayfayı yenilememek.

Umarım bu son cevap olacaktır

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

Saf JavaScript için bunun yerine click yöntemini kullanın

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

Sadece çok basit ama çalışan bir çözüm buldum <form></form>, gönderme ve ferahlatıcı önlemek için istediğim bölümden kaldırarak .

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

Burada sadece Düğmeler olması gerektiği gibi gönderilir.

Sadece bu şekilde geri dönün:

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 () öğesinden true ve false döndürür; gereksinimi başına fonksiyonu