Comment éviter que la page ne s'actualise en appuyant sur le bouton d'envoi sans aucune donnée dans les champs?

La validation fonctionne correctement, tous les champs deviennent rouges mais la page est immédiatement actualisée. Ma connaissance de JS est relativement basique.

En particulier, je pense que la processForm()fonction en bas est «mauvaise».

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

Vous pouvez empêcher l'envoi du formulaire avec

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

Bien sûr, dans la fonction, vous pouvez vérifier les champs vides, et si quelque chose ne semble pas correct, e.preventDefault() arrêtera la soumission.

Sans jQuery:

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

Ajoutez ce code onsubmit = "return false":

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

Cela a réglé le problème pour moi. Il exécutera toujours la fonction onClick que vous spécifiez

Remplacez le type de bouton par button:

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

Vous pouvez utiliser ce code pour soumettre un formulaire sans actualisation de la page. J'ai fait cela dans mon projet.

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

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

Un excellent moyen d'éviter de recharger la page lors de la soumission à l'aide d'un formulaire consiste à ajouter return falsevotre attribut onsubmit.

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

Ce problème devient plus complexe lorsque vous donnez à l'utilisateur 2 possibilités pour soumettre le formulaire:

1. en cliquant sur un bouton ad hoc
2. en appuyant sur la touche Entrée

Dans un tel cas, vous aurez besoin d'une fonction qui détecte la touche enfoncée dans laquelle vous soumettez le formulaire si la touche Entrée a été appuyée.

Et maintenant vient le problème avec IE (en tout cas la version 11) Remarque: Ce problème n'existe pas avec Chrome ni avec FireFox!

• Lorsque vous cliquez sur le bouton Soumettre, le formulaire est soumis une fois; bien.
• Lorsque vous appuyez sur Entrée, le formulaire est soumis deux fois ... et votre servlet sera exécuté deux fois. Si vous n'avez pas d'architecture PRG (post redirect get) côté serveur, le résultat peut être inattendu.

Même si la solution semble triviale, il m'a fallu de nombreuses heures pour résoudre ce problème, j'espère donc que cela pourrait être utile pour d'autres personnes. Cette solution a été testée avec succès, entre autres, sur IE (v 11.0.9600.18426), FF (v 40.03) et Chrome (v 53.02785.143 m 64 bits)

Le code source HTML & js se trouve dans l'extrait. Le principe y est décrit. Avertissement:

Vous ne pouvez pas le tester dans l'extrait de code car l'action de publication n'est pas définie et le fait d'appuyer sur la touche Entrée peut interférer avec le stackoverflow.

Si vous rencontrez ce problème, copiez / collez simplement le code js dans votre environnement et adaptez-le à votre contexte.

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

En Javascript pur, utilisez: e.preventDefault()

e.preventDefault() est utilisé dans jquery mais fonctionne en javascript.

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

  //some code

  e.preventDefault();
})

La plupart des gens empêcheraient la soumission du formulaire en appelant la event.preventDefault()fonction.

Un autre moyen est de supprimer l'attribut onclick du bouton et obtenir le code en processForm()dehors en .submit(function() {tant que return false;cause la forme de ne pas se soumettre. De plus, faites en sorte que les formBlaSubmit()fonctions renvoient une valeur booléenne en fonction de la validité, à utiliser dansprocessForm();

katshLa réponse est la même, juste plus facile à digérer.

(Au fait, je suis nouveau dans stackoverflow, donnez-moi des conseils s'il vous plaît.)

La meilleure solution est lors de la soumission d'appeler n'importe quelle fonction et de renvoyer false après.

onsubmit="xxx_xxx(); return false;"

Personnellement, j'aime valider le formulaire lors de l'envoi et s'il y a des erreurs, il suffit de renvoyer 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
 }

Si vous souhaitez utiliser Pure Javascript, l'extrait de code suivant sera meilleur que toute autre chose.

Supposons :

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>

J'espère que cela fonctionne pour vous !!

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

Je n'ai pas vérifié comment cela fonctionne. Vous pouvez également lier (this) pour qu'il fonctionne comme jquery ajaxForm

utilisez-le comme:

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

il renvoie des nœuds afin que vous puissiez faire quelque chose comme soumettre i l'exemple ci-dessus

si loin de la perfection mais cela suppose que cela fonctionne, vous devez ajouter la gestion des erreurs ou supprimer la condition de désactivation

Utilisez simplement "javascript:" dans votre attribut action du formulaire si vous n'utilisez pas d'action.

Parfois, e.preventDefault ();fonctionne alors les développeurs sont heureux mais parfois ne fonctionnent pas alors les développeurs sont tristes alors j'ai trouvé une solution pourquoi parfois pas

le premier code fonctionne parfois

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

deuxième option pourquoi ne pas travailler? Cela ne fonctionne pas car jquery ou une autre bibliothèque javascript ne se charge pas correctement, vous pouvez vérifier dans la console que tous les fichiers jquery et javascript sont chargés correctement ou non.

Cela résout mon problème. J'espère que cela vous sera utile.

À mon avis, la plupart des réponses tentent de résoudre le problème posé sur votre question, mais je ne pense pas que ce soit la meilleure approche pour votre scénario.

Comment éviter que la page ne s'actualise en appuyant sur le bouton d'envoi sans aucune donnée dans les champs?

A .preventDefault()ne rafraîchit en effet pas la page. Mais je pense qu'un simple requiresur les champs que vous souhaitez remplir de données, résoudrait votre problème.

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

Notez la requirebalise ajoutée à la fin de chacun input. Le résultat sera le même: ne pas actualiser la page sans aucune donnée dans les champs.

J'espère que ce sera la dernière réponse

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

Pour du JavaScript pur, utilisez plutôt la méthode du clic

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

Je viens de trouver une solution très simple mais fonctionnelle, en supprimant <form></form>de la section que je voulais empêcher de publier et d'actualiser.

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

Ici, seuls les boutons se soumettent comme ils le devraient.

Mettez simplement le retour comme ceci:

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>

Renvoie vrai et faux depuis validate (); fonction selon l'exigence