1
votes

jQuery coupe et longueur

J'ai le code HTML et jQuery suivant

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

$("#addNeedleButton").click(function() {
  var needle = $("#needleName").val();
  needle = needle.trim();
  if (needle.length == 0) {
    $("#addNeedleManagement").submit(function(e) {
      e.preventDefault();
      er("Please key in a Needle Type");
    });
  }
});

  function er($message){
    var errorDisplay = $message;
    $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
    $('#errorDisplay').show();
    $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function(){
        $("#errorDisplay").slideUp(1000);
    });
   }

Ce dont j'ai besoin, c'est d'empêcher l'envoi de formulaire si le champ de saisie est vide ou s'il ne contient que des espaces blancs. Mais d'une manière ou d'une autre, ce code ne fonctionne pas. Si je n'ai rien saisi, alors il est censé afficher le message d'erreur. Mais cela ne déclenche pas. Si je mets des espaces vides, cela fonctionne correctement en appelant le message d'erreur. Mais si j'ai saisi une chaîne, le message d'erreur apparaît toujours.

Quelqu'un sait-il pourquoi?

jquery html

0 commentaires

6 Réponses :

2
votes

valider onsubmit et renvoyer false si la validation n'est pas réussie
pas besoin de joindre un événement lors d'un clic sur le bouton

<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

<div id="errorDisplay"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

#errorDisplay { color: red; }

$("#addNeedleManagement").submit(function(e) {
  var needle = $("#needleName").val();
  needle = needle.trim();
  if (needle.length == 0) {
    e.preventDefault();
    er("Please key in a Needle Type");

    return false;
  }
});

function er($message) {
  var errorDisplay = $message;
  $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
  $('#errorDisplay').show();
  $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function() {
    $("#errorDisplay").slideUp(1000);
  });
}

0 commentaires

3
votes

Vous avez fait quelques erreurs ici,

Ici, vous vérifiez s'il n'y a pas de valeur , puis envoyez le formulaire + afficher l'erreur. pas besoin de cela, affichez simplement l'erreur dans s'il n'y a pas de valeur et dans la partie else , vous devez appeler l'événement de soumission.

Vérifiez l'extrait de code

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
 
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>
   <div id ="errorDisplay"></div>

#errorDisplay{
  color: red
}

$("#addNeedleManagement").on('submit', function(event) {
   event.preventDefault();
  var needle = $("#needleName").val();
  needle = needle.trim();
  
  if (!needle) {
  er("Please key in a Needle Type");
    return false
  }else{
  //  Here is your submit ajax call
}
});

  function er($message){
    var errorDisplay = $message;
    $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
    $('#errorDisplay').show();
    $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function(){
        $("#errorDisplay").slideUp(1000);
    });
   }

if (needle.length == 0) {
    $("#addNeedleManagement").submit(function(e) {
      e.preventDefault();
      er("Please key in a Needle Type");
    });
  }

0 commentaires

2
votes

Ce qui suit résoudra votre problème, vous liez l'événement de soumission et pour la première fois si l'entrée est vide, la liaison de l'événement empêchera le prochain événement de tentative si l'entrée a une valeur.

p >

<div id="errorDisplay"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name" required>
      </div>
    </div>
  </div>
  <button type="submit" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

$("#addNeedleButton").click(function() {
  var needle = $("#needleName").val();
  needle = needle.trim();
  if (needle.length === 0) {
    $("#addNeedleManagement").submit(function(e) {
      e.preventDefault();
    });
   er("Please key in a Needle Type");
  } else {
    $("#addNeedleManagement").unbind();
    $("#addNeedleManagement").submit();
  }
});

  function er($message){
    var errorDisplay = $message;
    $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
    $('#errorDisplay').show();
    $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function(){
        $("#errorDisplay").slideUp(1000);
    });
   }

0 commentaires

4
votes

Remplacez votre code par

<script>
    $("#addNeedleButton").click(function(e) {
      var needle = $("#needleName").val();
      needle = needle.trim();

      if (needle.length == 0) {
         er("Please key in a Needle Type");
         return false
      } else {
          $('#addNeedleManagement').submit(); 
      }
});

function er($message) {
  var errorDisplay = $message;
  $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
  $('#errorDisplay').show();
  $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function() {
    $("#errorDisplay").slideUp(1000);
  });
}

Votre script est

<form method="post" id="addNeedleManagement" name="addNeedleManagement">
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="addNeedle">Needle Type</label>
        <input type="text" class="form-control" id="needleName" name="needleName" placeholder="New needle name" title="Please key in the new needle name">
      </div>
    </div>
  </div>
  <button type="button" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
</form>

2 commentaires

ne fonctionnera pas si vous appuyez sur Entrée et soumettez le formulaire au lieu de cliquer sur le bouton

@AbdelrahmanGobarah Cela fonctionne pour moi même avec le scénario que vous avez dit. Puis-je savoir pourquoi vous avez dit que cela ne fonctionnera pas avec ledit scénario?

7
votes

<html>
<title>

</title>

<head>


</head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<body>
    <form method="post" id="addNeedleManagement" name="addNeedleManagement">
        <div class="form-group">
            <div class="row">
                <div class="col-sm">
                    <label for="addNeedle">Needle Type</label>
                    <input required type="text" class="form-control" id="needleName" name="needleName"
                        placeholder="New needle name" title="Please key in the new needle name">
                    <span id="errorDisplay"><span>
                </div>
            </div>
        </div>
        <button type="button" id="addNeedleButton" name="addNeedleButton" class="btn btn-primary">Add Needle</button>
    </form>
    <script>
        $("#addNeedleButton").click(function () {
            var needle = $("#needleName").val();
            needle = needle.trim();
            if (needle.length == 0) {
                //   $("#addNeedleManagement").submit(function(e) {
                //    e.preventDefault();

                er("Please key in a Needle Type");
return false;

                // });
            }
        });

        function er(message) {
            var errorDisplay = message;
            $("#errorDisplay").html(`<strong>Error </strong>${errorDisplay}`);
            $('#errorDisplay').show();
            $("#errorDisplay").fadeTo(2000, 1000).slideUp(1000, function () {
                $("#errorDisplay").slideUp(1000);
            });
        }
    </script>
</body>

</html>

1 commentaires

Votre code affichera le message d'erreur uniquement si return false; est donné après le er ("Please key in a Needle Type"); . Le message d'erreur doit venir en premier avant return false . Sinon, il n'affichera aucun message d'erreur. En tout cas merci pour l'effort. Upvote pour vous

3
votes

J'espère que vous avez suffisamment de réponses avec le code, mais juste pour vous donner la réponse à votre question pour savoir pourquoi votre code ne déclenche pas l'erreur au clic est;

Lorsque l'utilisateur clique sur le bouton, nous obtenons, coupons et stockons la valeur dans var aiguille, puis vérifions la longueur pour voir si elle est vide.

Maintenant, ce qui se passe, c'est qu'il existe déjà une liaison pour l'événement avec le clic de votre bouton, donc lorsque vous essayez de soumettre le formulaire, cela ne fonctionne pas comme prévu, ce qui entraîne la sortie du contrôle de l'écouteur d'événements de clic. Même si cela peut être corrigé en utilisant unbind (). Ce n'est pas considéré comme une méthode standard.

Envoyez toujours les formulaires en utilisant la fonction submit ().

0 commentaires