1
votes

Onsubmit n'appelle pas la fonction

Tentative de vérification de l'entrée du formulaire via une requête get jQuery, mais la fonction n'est pas appelée.

Essayé en utilisant uniquement jQuery (sans fonction), le $ .get fonctionne et renvoie les valeurs appropriées. J'ai besoin que l'approche de la fonction renvoie false si (et arrête la soumission du formulaire) si la condition n'est pas remplie.

<form onSubmit="return checkName();" action="/register" method="post">
    <div class="form-group">
        <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
    </div>
    <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
<script>
    function checkName() {
        $(document).ready(function () {
            $("button").click(function () {
                $.get("/check?username=" + document.getElementById('1').value, function (data, status) {
                    alert(data);
                    return false;
                });
            });
        });
    }
</script>

Je m'attends à ce que la fonction soit appelée, retourne true si l'entrée est vérifiée (et continuer avec la soumission du formulaire) et false (arrêter la soumission du formulaire) si la vérification échoue.

javascript jquery html

10 commentaires

pourrait avoir besoin d'être ceci: onSubmit = "checkName" également, supprimez $ (document) .ready qui n'a pas besoin d'être dans une fonction, même chose avec le $ ("bouton"). cliquez sur

Vous devez retourner false dans le checkName et non dans une fonction de rappel.

@jcubic ne serait pas .preventDefault () mieux ...

@GetOffMyLawn, mais seulement si vous passez $ event de l'intérieur onsubmit à la fonction checkName

supprimer onSubmit du html et tout mettre dans le JavaScript est également une bien meilleure pratique.

Ajoutez une fonction checkName () {console.log ("checkName"); ... et vous verrez que l'appelle , mais ne retourne pas false, car votre retour false est dans un callback ajax, donc cela se produit plus tard.

@GetOffMyLawn mais la question portait sur ce code, onSubmit = "return checkName ();" Je suppose qu'il le veut dans le code.

@ Freedomn-m il devra activer la conservation des journaux (c'est dans les outils de développement de Google Chrome qui ne sont pas sûrs des autres navigateurs) pour voir les journaux après l'envoi de la demande.

@jcubic, mon dernier commentaire ne vous était pas destiné, c'était juste une pensée générale hors sujet.

@jcubic bon appel - pourrait également ajouter une instruction debugger; et parcourir. @Maxim Apprendre à utiliser la console / le débogueur du navigateur vous fera gagner des heures.

7 Réponses :

-1
votes

Écrivez simplement le nom de la fonction suivi de (). pas besoin d'écrire return sur onsubmit appel de fonction

<form onSubmit="checkName();" action="/register" method="post">
    <div class="form-group">
        <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
    </div>
    <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>

            function checkName()
            {
                $(document).ready(function(){
                    $("button").click(function(){
                        $.get("/check?username=" + document.getElementById('1').value, function(data, status){
                            alert(data);
                            return false;
        });
      });
    });
            }

3 commentaires

1. oui, vous devez renvoyer la valeur pour arrêter la soumission du formulaire. 2. Vous renvoyez false à partir de la fonction de gestionnaire asynchrone. Cela ne fonctionnera toujours pas.

-1
votes

Vous devez supprimer le document.ready et le bouton événement cliquez sur.

EDITED

Ajout d'un paramètre d'événement à checkName:

<form onSubmit="return checkName(event);" action="/register" method="post" id="myForm">
    <div class="form-group">
        <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
    </div>
    <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>
<script>
     function checkName(e){
         e.preventDefault();
         e.returnValue = false;
         $.get("/check?username=" + document.getElementById('1').value,
           function(data, status){
           if(data) // here you check if the data is ok 
             document.getElementById('myForm').submit();
           else
            return false;
        });}

</script>

4 commentaires

Cela a fonctionné, la fonction est appelée, mais n'empêche pas le formulaire de soumettre (

- même cela n'empêche pas le formulaire de se soumettre, bien que la requête .get fonctionne

Cela n'empêchera jamais la soumission du formulaire car le return est dans le rappel du gestionnaire asynchrone.

J'ai fixé ma réponse.

0
votes

Vous devez revenir de la fonction et non de l'intérieur du rappel, et vous en faites un si vous attribuez à onsubmit vous n'avez pas besoin de gestionnaire de clics. Et le gestionnaire de clics ne fonctionnera pas non plus si vous avez une action sur un formulaire.

Vous en avez besoin:

var valid = false;
function checkName() {
   if (valid) { // if valid is true it mean that we submited second time
      return;
   }
   $.get("/check?username=" + document.getElementById('1').value, function(data, status){
      if (data) { // we check value (it need to be json/boolean, if it's
                  // string it will be true, even string "false")
         valid = true;
         $('form').submit(); // resubmit the form
      }
   });
   return valid;
}

ceci est le code de base, si vous voulez soumettre le formulaire si data est faux, aucun utilisateur dans db alors vous avez besoin de quelque chose comme ça (il y a probablement une meilleure façon de faire ça:

function checkName() {
  $.get("/check?username=" + document.getElementById('1').value, function(data, status){
    alert(data);
  });
  return false;
}

6 commentaires

Merci, mais le formulaire est toujours soumis.

Au fait, le @ .get renvoie json ({true} ou {false})

@MaximBiryukov string ou boolean, essayez console.log (typeof data)

a essayé d'écrire console.log (typeof data) sous la requête $ .get, mais il n'apparaît pas dans la console.

[Violation] La redistribution forcée lors de l'exécution de JavaScript a pris 53 ms - c'est le seul message pertinent que je reçois dans la console.

@MaximBiryukov si vous utilisez Google Chrome, vous pouvez définir la conservation des journaux dans l'onglet de la console (celui du haut), vous pouvez également définir la conservation des journaux dans l'onglet du réseau. De plus, si votre demande d'obtention envoie une valeur false parce que l'utilisateur n'est pas dans la base de données et que le formulaire peut être soumis, vous devez définir if (! Data) {. Si console.log dit «chaîne» après avoir défini les journaux de conservation, vous devez ajouter un troisième argument à $ .get qui devrait être 'json'

0
votes

Vous renvoyez false à partir de la fonction de gestionnaire asynchrone. En tant que tel, cela n'empêchera pas l'envoi du formulaire.

Une meilleure solution serait de toujours empêcher la soumission du formulaire puis, en fonction du résultat de votre demande AJAX, de le soumettre manuellement.

Notez également qu'il est préférable d'affecter des gestionnaires d'événements discrets. Comme vous utilisez jQuery, c'est une tâche triviale. Cela vous permet également d'accéder à l'objet Event qui a été déclenché par la soumission du formulaire afin de l'annuler. Essayez ceci:

$(document).ready(function() {
  $("#yourForm").on('submit', function(e) {
    e.preventDefault();
    var _form = this;
    $.get('/check', { username: $('#1').val() }, function(data, status) {
      // interrogate result here and allow the form submission or show an error as required:
      if (data.isValid) { // just an example property, change as needed
        _form.submit();
      } else {
        alert("Invalid username");
      }
    });
  });
});

<form action="/register" method="post" id="yourForm">
  <div class="form-group">
    <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
  </div>
  <div class="form-group">
    <input class="form-control" name="password" placeholder="Password" type="password">
  </div>
  <div class="form-group">
    <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
  </div>
  <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>

1 commentaires

C'est bien mieux que ma solution, il est toujours préférable d'utiliser des événements au lieu d'un gestionnaire en ligne en html.

0
votes

Ce n'est plus une pratique courante de placer des événements dans le html, car il y a addEventListener . Vous pouvez l'ajouter directement depuis le javascript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/register" method="post">
  <div class="form-group">
    <input id="1" autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
  </div>
  <div class="form-group">
    <input class="form-control" name="password" placeholder="Password" type="password">
  </div>
  <div class="form-group">
    <input class="form-control" name="passconf" placeholder="Confirm password" type="password">
  </div>
  <button id="2" class="btn btn-primary" type="submit" value="submit">Register</button>
</form>

Cela facilite la navigation du code et le rend plus facile à lire.

Nous pouvons alors empêcher le formulaire de faire c'est l'action par défaut en passant le premier paramètre à la fonction et en appelant .preventDefault () comme vous pouvez le voir à partir de la fonction modifiée ci-dessous. Nous n'avons plus besoin d'avoir return false à cause de cela.

document.querySelector('form').addEventListener('submit', checkName)

function checkName(e) {
  e.preventDefault()
  $.get("/check?username=" + document.getElementById('1').value, function(data, status) {
    alert(data);
  });
}

document.querySelector('form').addEventListener('submit', checkName)

0 commentaires

-1
votes

Je pense que si vous remplacez le type de bouton de soumettre à bouton, puis lors de l'événement de clic sur le bouton, à l'intérieur de get request, si votre condition devient vraie, soumettez le formulaire explicitement, vous aiderait également à atteindre ce dont vous avez besoin.

0 commentaires

0
votes

Vous pouvez marquer tous vos champs comme obligatoires s'ils ne peuvent pas être laissés vides. Pour votre fonction, vous pouvez utiliser le format ci-dessous qui fonctionne pour moi.

function checkName() {
  var name = $("#1").val();
  if ('check condition for name which should return true') {} else {
    return false;
  }
  return true;
}

0 commentaires