Arrêter la page de rafraîchissement du formulaire sur soumettre
Comment pourrais-je empêcher la page de se rafraîchir lorsque j'appuie sur le bouton Envoyer sans aucune donnée dans les champs?
La validation fonctionne bien, 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 fonction processForm() 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
/////////////////
});
13 réponses
Vous pouvez empêcher la soumission 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.
Remplacer le type de bouton à button:
<button type="button">My Cool Button</button>
Ajoutez ce code onsubmit= "return false":
<form name="formname" onsubmit="return false">
Qui l'a réparé pour moi. Il exécutera toujours la fonction onClick que vous spécifiez
Vous pouvez utiliser ce code pour la soumission de formulaire sans actualisation de page. J'ai fait ça 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();
});
});
Ce problème devient plus complexe lorsque vous donnez à l'utilisateur 2 possibilités de soumettre le formulaire:
- en cliquant sur un bouton ad hoc
- 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 soumettrez le formulaire si la touche Entrée a été atteinte.
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 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 L'architecture prg (post redirect get) côté serveur, le résultat peut être inattendu.
Même si la solution semble triviale, cela me prend beaucoup d'heures pour résoudre ce problème, donc j'espère 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) & Chrome (v 53.02785.143 M 64 bits)
Le code source HTML et js sont dans l'extrait. Le principe y est décrit. Avertissement:
Vous ne pouvez pas le tester dans l'extrait car l'action post ne l'est pas défini et en appuyant sur la touche Entrée peut interférer avec stackoverflow.
Si vous avez rencontré ce problème, copiez/collez simplement du 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>La plupart des gens empêcheraient le formulaire de soumettre en appelant le event.preventDefault() fonction.
Un autre moyen est de supprimer l'attribut onclick du bouton, et d'obtenir le code dans {[1] } dans .submit(function() { Car return false; provoque la non-soumission du formulaire. En outre, faites en sorte que les fonctions formBlaSubmit() renvoient booléen en fonction de la validité, pour une utilisation dans processForm();
katsh's réponse est la même, juste plus facile à digérer.
(en passant, je suis nouveau à stackoverflow, donnez-moi des conseils s'il vous plait. )
Personnellement, j'aime valider le formulaire sur submit et s'il y a des erreurs, il suffit de retourner false.
$('form').submit(function() {
var error;
if ( !$('input').val() ) {
error = true
}
if (error) {
alert('there are errors')
return false
}
});
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();
})
Si vous voulez utiliser du Javascript pur, l'extrait suivant sera meilleur que toute autre chose.
Supposons que:
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>
Espérons 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;
}
N'a pas vérifié comment cela fonctionne. Vous pouvez également lier (ceci) pour que cela 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 submit i ci-dessus exemple
Si loin de la perfection, mais cela suppose de fonctionner, vous devez ajouter la gestion des erreurs ou supprimer la condition de désactivation
$("#buttonID").click(function (e) {
e.preventDefault();
//some logic here
}
Pour le JavaScript pur, utilisez la méthode click à la place
<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>
Il suffit de mettre 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>Retourne true et false à partir de validate (); fonctionne selon l'exigence