La validation de la longueur du numéro de téléphone à l'aide de jquery ne fonctionne pas

Question

J'essaie de valider la longueur du numéro de téléphone à l'aide de jquery, lorsque l'utilisateur commence à taper quelque chose de lui-même, cela devrait s'afficher, j'ai exécuté le code suivant :

function validatePhone(phone) {
  if (phone.value.length <= 10 && phone.value.length >= 5) {
    let
    var = 'Yes';
    return var;
  } else {
    let
    var = 'No';
    return var;
  }
}

function validate() {
  let result1 = $("#result1");
  let phone = $("#phone").val();
  result1.text("");


  if (validatePhone(phone)) {
    result1.text(var);
    result1.css("color", "green");
  }
  return false;
}
jQuery(function($) {
  $("#phone").on("input", validate);
});

<input type="number" class="form-control"  id="phone" name="phone">
<span class="label">Phone Number<span style="color:red">*</span> <span id="result1"></span></span>

Mais ça ne marche pas, quelqu'un peut-il me dire ce qui ne va pas ici, merci d'avance

Answer 1

J'ai un peu nettoyé votre code et tout va bien, mais vous avez quelques erreurs mineures de syntaxe et de logique. Je recommande également d'utiliser la balise label. Le code peut être écrit plus court si vous le souhaitez !

function validatePhone(phone) {
  if (phone.length <= 10 && phone.length >= 5) {
    return true;
  } else {
    return false;
  }
}

function validate() {
  let result1 = $("#result1");
  let phone = $("#phone").val();
  result1.text("");


  if (validatePhone(phone)) {
    result1.text("great!");
    result1.css("color", "green");
  } else {
    result1.text("please input phone number");
    result1.css("color", "red");
  }
}

jQuery(function($) {
  $("#phone").on("input", validate);
});

HTML

Phone Number *

Je vous recommande également de jeter un œil au règlement css:valid ! https://developer.mozilla.org/en-US/docs /Web/CSS/:valid