jQuery zone de texte de validation en utilisant à la fois sur keyup et flou

J'ai une zone de texte et la nécessité de valider les deux keyup et le flou des événements. Si je tape "X", les deux événements seront à feu et, évidemment, vous allez voir deux alertes sur le code ci-dessous. L'événement keyup est nécessaire, comme je l'ai peut déclencher une action basée sur une valeur valide et aussi besoin de garder le flou de l'événement dans le cas où la touche de Tabulation est pressé. L'objectif est d'afficher une alerte ici. \m/\m/

$("#txtLength").on('keyup blur', function (e) {
    if ($(this).val().length > 0) {
        switch (true) {

            case !$.isNumeric($(this).val()):
                alert("Please enter a numeric value.");
                $(this).focus();
                break

            case ($(this).val() < 5) || ($(this).val() > 10):
                alert("Length must be a numeric value between 5 and 10.");
                $(this).focus();
                break;

            default:
        }
    }
});
  • si vous le faites sur keyup, vous n'avez pas besoin de validation sur blur sauf si vous faites totalement différentes sur blur.
  • Vous n'en avez pas besoin. Si vous utilisez uniquement l'événement keyup, vous obtiendrez l'alerte et il sera mis l'accent. Toutefois, l'utilisateur peut maintenant l'Onglet de la zone de texte en laissant une valeur non valide derrière.
  • votre énoncé est faux ici. Si je tape "X", les deux événements seront à feu jsfiddle.net/EbLdf .. Seulement keyup événement est déclenché.
  • Vous souhaitez valider sur le ONKEYPRESS et événements ONCHANGE.
InformationsquelleAutor 80sRocker | 2014-01-27
  1. 4

    Merci pour tous vos commentaires. Quelques bonnes idées ont aidé à trouver une solution. Coller à la rubrique à partir d'éviter l'affichage de deux alertes à l'aide .sur pression de touche et flou, voici ce que j'ai fini par faire.

    var bAlertCalled = false;

$("#txtLength").on('keyup blur', function (e) {
    if (bAlertCalled === true) {
        bAlertCalled = false;
        return;
    }

    if ($(this).val().length > 0) {
        var iLength = parseInt($(this).val());

        switch (true) {
            case !$.isNumeric($(this).val()):
                bAlertCalled = true;
                $(this).focus();
                alert("Please enter a numeric value.");
                break

            case (iLength  < 5) || (iLength  > 10):
                bAlertCalled = true;
                $(this).focus();
                alert("Length must be a numeric value between 5 and 10.");
                break;

            default:
        }
    }
});
    InformationsquelleAutor 80sRocker
  2. 0

    Il semble que cela ne fera que causer des problèmes si vous utilisez un alert() ou une autre méthode qui interrompt l'utilisateur. Utiliser un formulaire en ligne de la validation, et l'utilisateur ne sera probablement jamais d'avis. Aussi, votre chèque de la valeur n'a pas de travail, car "6" n'est pas > 5 ou < 10. Je le fixe que l'utilisation de parseInt:

    html:

    <input type="text" id="txtLength" /> <span id='spanLengthValidation'></span>

    script

    $("#txtLength").on('keyup blur', function (e) {
    $("#spanLengthValidation").text("");
    var amt = parseInt($(this).val())
    if ($(this).val().length > 0) {
        switch (true) {
        case !$.isNumeric($(this).val()):
            $("#spanLengthValidation").text("Please enter a numeric value.");
            $(this).focus();
            break;

        case (amt < 5) || (amt > 10):
            $("#spanLengthValidation").text("Length must be a numeric value between 5 and 10.");
            $(this).focus();
            break;

        default:
        }
    }
});
    InformationsquelleAutor Dave