Arrêt de la page de rechargement en cas de validation échouée

Question

J'ai actuellement une validation javascript active, de sorte que le formulaire ne sera pas affiché sans au moins une case à cocher sélectionnée. Il va lancer un message à l'utilisateur pour s'assurer de sélectionner au moins un utilisateur. Ce que je voudrais faire maintenant, est d'arrêter le formulaire de faire autre chose, il semble recharger la page après avoir cliqué sur le bouton soumettre, et il serait préférable de ne pas le faire.

mon code actuel est le suivant:

Forme:

<form name="frm_multi_message_form" id="multi_message_form" style="margin-bottom: 0px;" method="post"><button style="border-style: none; margin: 5px 0 5px 0;" type="submit" action="" onClick="checkForm(this);" >Message multiple sitters</button> 
    </form> 

Mon Javascript:

function checkForm(form) 
     { 

    if (document.querySelector('form[id="multi_message_form"] input[name="username[]"]:checked')) { 
      document.frm_multi_message_form.action = "http://example.com/another-page/"; 
      document.frm_multi_message_form.submit(); 
     } else { 
      alert("You must select at least one sitter to message"); 

     } 
    return false; 
     } 

Je n'ai pas une question de jeter l'alerte, et la forme présente, Je voudrais savoir comment déclencher preventDefault (ou n'est-ce pas autorisé dans une requête javascript ??) si je pouvais, donc rien ne se produit autre que l'erreur affichée.

Answer 1

Vous devez utiliser onClick="return checkForm(this);" et votre formulaire ne sera pas soumis en cas d'erreur de validation

Answer 2

Vous avez besoin d'un gestionnaire d'événements sur la soumission du formulaire pour éviter le comportement par défaut (soumission):

document.getElementById('multi_message_form').addEventListener('submit', function(evt) { 
    evt.preventDefault(); 
}) 

Answer 3

utiliser « return false » après validation comme

$("#formId").submit(function() 
{ 
if(someField == "") 
{ 
$("#divId").text 
return false; 
} 
}