Le formulaire est toujours envoyé, en essayant d'utiliser e.preventDefault();

Question

J'ai donc ce formulaire. Je veux vérifier si l'utilisateur a validaty le captcha, mais a des problèmes. Voici le formulaire qui vérifie la fonction.

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" onsubmit="check_if_capcha_is_filled()"> 

Voici la fonction qui détermine si doSubmit (le captcha) a été validé.

function check_if_capcha_is_filled(e){ 
    if(doSubmit) return true; 
    e.preventDefault(); 
    alert('Fill in the capcha!'); 
    return false; 
}; 

Mais je reçois une erreur

Uncaught TypeError: Cannot read property 'preventDefault' of undefined 
at check_if_capcha_is_filled 

Les pointeurs sur ce que je suis absent? Je vous remercie.

Answer 1

Votre e.preventDefault est utilisé de manière incorrecte. Il ne fera rien parce que vous passez un événement à une fonction, vous voulez joindre au gestionnaire d'événements comme celui-ci:

$('form').on('submit', function(e) 
{ 
    e.preventDefault(); 
    //rest of code 
}) 

Cela arrêtera le soumettre action.

refs: http://api.jquery.com/event.preventDefault/

Answer 2

Vous avez deux problèmes ici. Tout d'abord vous devez return la fonction de l'attriubute événement onsubmit. Deuxièmement, vous ne passez pas l'événement à la fonction, mais cela ne fonctionnera que lorsqu'un événement global est disponible, par exemple. pas Firefox.

Pour résoudre le problème et améliorer votre logique, vous pouvez utiliser à la place addEventListener() pour ajouter de manière non-intrusive le gestionnaire d'événements à l'élément et supprimer l'attribut d'événement on* obsolète. Essayez ceci:

var doSubmit = false; 
 

 
document.getElementById('myForm').addEventListener('submit', function(e) { 
 
    if (doSubmit) 
 
    return; 
 
    
 
    e.preventDefault(); 
 
    alert('Fill in the capcha!'); 
 
});

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup"> 
 
    <button type="submit">Submit</button> 
 
    <form>

Answer 3

Utilisez écouteur d'événement on

de changement à

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" > 

$('form').on('submit', function(e){ 
    // validation code here 
    if(!valid) { 
     e.preventDefault(); 
    } 
    }); 

Answer 4

Est-ce que vous voulez?

<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup"> 

ensuite dans votre fichier js:

function check_if_capcha_is_filled(){ 
    if (doSubmit){ 
     return true; 
    }else{ 
     return false; 
    } 
}; 

$('#myForm').on('submit', function(e){ 
    if (!check_if_capcha_is_filled){ 
     e.preventDefault(); 
    } 
}); 

Answer 5

En utilisant jQuery et si vous voulez confirmer la soumettre.

<button name="delete" class="submitbutton">Delete</button> 

$('.submitbutton').click(function() { 
    var buttonpressed; 
    buttonpressed = $(this).attr('name'); 
    var r = confirm("Please confirm to " + buttonpressed); 

    if (r == true) { 
     $('#yourformid').submit(); 
    } else { 
     return (false); 
    } 
});