1
votes

Vous voulez que l'attribut de modèle html fonctionne sans appuyer sur un bouton d'envoi

Je travaille sur la validation et mets un attribut de modèle html et je veux voir le message d'erreur sans cliquer sur un bouton Enregistrer / Soumettre. Lorsque je clique en dehors du champ, il doit être validé avec ma condition de modèle.

Voici mon code:

<div class="col-md-2">
<div class="form-group">
<label>Extra Credit Days<span class="text-danger">*</span></label>
<input class="form-control" type="text" id="txt_credit_days" name="" 
pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}"title="Enter in specified 
format">
</div> </div>

Quel sera le JQuery ou JavaScript?

javascript jquery html button submit-button

0 commentaires

3 Réponses :

0
votes

Sur la base de ceci réponse . Vous pouvez déclencher manuellement la soumission avec javascript et preventDefault lors de la modification de l'événement d'entrée.

0 commentaires

1
votes

Voici une approche qui fonctionne pour moi sur Chrome:

Créez un bouton d'envoi masqué.
Écoutez l'événement focusout dans le champ input .
Déclenchez cliquez sur le bouton d'envoi masqué.

Cela devrait déclencher la validation HTML5 chaque fois que le champ perd le focus (en cliquant en dehors du champ ou en sortant du champ).

Extrait:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <div class="form-group">
    <label>Extra Credit Days<span class="text-danger">*</span></label>
    <form id="form">
      <input class="form-control" type="text" id="txt_credit_days" name="" pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}" title="Enter in specified 
format">
      <input type="submit" class="hide" id="inputButton" style="visibility:hidden;">
    </form>
  </div>
</div>

let input = document.getElementById("txt_credit_days");
let inputButton = document.getElementById("inputButton");

input.addEventListener("focusout", function() {
  inputButton.click();
});

Remarque: Si vous n'avez pas besoin de l'alerte de validation basée sur le navigateur (c'est-à-dire que vous préférez afficher votre propre boîte de dialogue d'alerte ou un autre message informant l'utilisateur que la validation a échoué), vous pouvez simplement utiliser la méthode checkValidity () sur l'élément d'entrée.

3 commentaires

mais je ne veux appuyer sur aucun bouton. lorsque j'ai cliqué sur l'écran ou en dehors de ce champ, il sera validé à cette condition.

@Aditya Vous ne devez appuyer sur aucun bouton. C'est simulé. Cliquez sur "Exécuter l'extrait de code", entrez des données dans le champ, puis cliquez dessus pour voir ce que je veux dire.

Ouais!! Merci son travail.

0
votes

Vous pouvez valider sur le flou de l'expression régulière. Faites certaines choses si une mauvaise chaîne est donnée

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-md-2">
<div class="form-group">
<label>Extra Credit Days<span class="text-danger">*</span></label>
<input class="form-control" type="text" id="txt_credit_days" name="" 
pattern="(?=.*\d)(?=.*[WQYDM])(?=.*[WQYDM]).{1,3}"title="Enter in specified 
format">
</div> </div>

$("input[pattern]").blur(function(){
  var elem = $(this);
	 
  var pattern = new RegExp(elem.attr("pattern"));
  if (pattern.test(elem.val())) {
     alert('okay');
  } else {
  	 alert('bad');
     //disable form submit
  }
})

0 commentaires