HTML5, comment forcer la validation du modèle d'entrée sur le changement de valeur?

Je suis en train d'apprendre HTML5 et est venu à travers la suivante. Je voudrais utiliser le pattern de saisie de mot-clé pour valider l'entrée de l'utilisateur (par exemple, après validation en appuyant sur tab ou un changement d'orientation de l'entrée de la boîte).

J'ai essayé ce qui suit:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" />  </li>

Et ainsi:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" />  </li>

J'ai fait le code pour

onchange="this.variable.validate()"

Comment déclencher la validation sur l'évolution de la valeur? Je suis en mesure de le faire uniquement onSubmit.

source d'informationauteur Daniel

html5 validation

9

_{Avertissement:

Tout ce que je vais dire ici fonctionne pour tous les navigateurs modernes. Le terme "navigateur moderne" dans ce contexte exclut IE9 et plus tôt. Aussi Safari pour Windows n'a qu'une prise en charge partielle.}

Si vous avez besoin d'un style de code, vous pouvez l'utiliser pur CSS pour ce:
```
input[pattern]:invalid{
  color:red;
}
```
Lors de l'utilisation du motif, le onsubmit la validation se fait automatiquement par le navigateur (ne fonctionne pas dans Safari pour Windows).

La suite de jQuery code de la force de la validation à chaque fois que l'entrée est changé.

Il intercepte le oninput événement sur le <input...> éléments. Si la valeur est invalide après l'événement, la modification est annulée et la valeur d'origine est rétabli. Il traite également des situations où la valeur non valide a été collée dans le champ.

La data() function magasins et de récupérer toutes les données de l'élément en utilisant le HTML5 attribut data-. La fonction stocke la valeur d'origine dans l'élément data-last-valid.

<script lang="text/javascript">
    //First "input" means event type `oninput`, second "input" is the CSS selector.
    //So read as "for all <input ...> elements set the event handler 
    //for the "oninput" event to the function...
    $(document).on("input", "input", function (event) {
        if (this.checkValidity()) {
            //Store the current valid value for future use
            $(this).data('last-valid', this.value);
        }
        else {
            //Undo the change using the stored last valid value
            this.value = $(this).data('last-valid') || "";
        }
    });
</script>

Vous devez utiliser keyup, focus et blur fonction pour mettre en œuvre votre besoin.
Par exemple:

vous avez champ de saisie de mot de passe:

<input id="pswd" type="password" required name="pswd" />

Dans Le Code JavaScript :

$('input[type=password]').keyup(function() {
//keyup event code here with validation rules });

$('input[type=password]').focus(function() {
//focus code here to show message which contains rules for input field  });

$('input[type=password]').blur(function() {
//blur code here    });

Si vous souhaitez utiliser jQuery pour créer un backport le modèle de la fonctionnalité des navigateurs plus anciens comme IE8, vous pourriez faire quelque chose comme:

//Jquery Function to Validate Patterns on Input Objects
(function( $ ){
    $.fn.validatePattern = function(search) {
        //Get the current element's siblings
        var pattern = this.attr('pattern');
        var value = this.val();

        return !(pattern&&(value.length>0)&&!value.match( new RegExp('^'+pattern+'$') ));
    };
})( jQuery );

$(document).ready(function() {
    //Bind pattern checking (invalid) to on change
    $(':input').change(function() {
        if (!$(this).validatePattern()) {
            $(this).addClass('invalidPattern');
        }
    });
    //Bind pattern valid to keyUp
    $(':input').keyUp(function() {
        if ($(this).validatePattern()) {
            $(this).removeClass('invalidPattern');
        }
    });
});

Cela va ajouter la classe invalidPattern à l'entrée des objets qui ont un modèle et ne lui correspondent pas. Vous pouvez également ajouter des contrôles nécessaires, etc, et à soumettre des contrôles du formulaire afin de prévenir la soumission si les habitudes ne pas valider. Ce que j'ai mis ci-dessus est un rapide, léger script uniquement de valider le modèle.

Pour une plus fonctionnel cale, regardez http://adodson.com/jquery.form.js/

Le modèle de code de validation est à partir de ce projet.

0

Avez-vous pris un coup d'oeil à javascript "onkey" des fonctions?

onkeyup peut être celui que vous cherchez si vous voulez quelque chose que l'utilisateur tape.

En outre, onchange se produit lorsque le champ perd le focus, tandis que onkeyup est déclenché comme les types d'utilisateurs. Dépend de qui vous avez besoin.

Vous beaucoup de qui veulent essayer quelque chose comme ceci:

onchange = variable.validate(this.value)

Vous devez vous connecter pour publier un commentaire.