Affichage d'un message près de TextBox en utilisant Javascript

Question

J'ai un formulaire aspx et j'ai besoin de faire des validations en utilisant jquery ou javascript.

Je veux juste donner un message à proximité de la zone de texte si un utilisateur d'entrer une valeur qui est pas valable dans ce textbox.Inorder pour afficher le message dans une fenêtre contextuelle [non alert (« message »)]

Comment puis-je trouver la position de la zone de texte dans laquelle l'utilisateur entre les données invalides ou comment puis-je afficher un message près de la zone de texte en utilisant javascript ou jquery?

J'ai besoin de la validation se produire dans le flou. Ainsi, il est facile pour l'utilisateur de savoir s'il a entré une donnée valide immédiatement après avoir donné l'entrée.

Merci d'avance. Je ne suis pas intéressé d'utiliser la validation asp.net ajax et son extension d'accroche.
Je veux juste implémenter une fonctionnalité qui est similaire à l'extension de légende de validation.

Answer 1

Lorsque vous liez l'événement de flou à la zone de texte, vous savez quelle zone de texte il contient. Utilisez simplement votre callback javascript pour insérer l'erreur à proximité.

Si vous faites jquery, il pourrait ressembler à:

$('.my_textboxes').blur(function() {

var textbox = $(this);

//ajax validation call 
$.post('/whereever', {}, function(response) { 
    //ajax callback 
    if (response == 'error') { 
     textbox.next().html(error); //something like this to insert the error into the next element after the texrbox, eg, a span to hold the error 
    } 
});` 

Answer 2

Vous pouvez utiliser le jQuery (ASP.NET) Validator Callout Plugin

Answer 3

Exactement comment vous faites cela dépend la disposition de votre formulaire, mais en général, vous feriez probablement quelque chose comme ceci: si la validation transforme une erreur pour un champ de texte, vérifiez pour voir si une "boîte d'erreur" existe déjà pour ce champ. Si c'est le cas, il suffit de mettre à jour son contenu avec le nouveau message d'erreur; sinon, ajoutez l'élément d'erreur.

Une façon de le faire serait d'utiliser une balise <span> avec une classe particulière (à des fins de mise en page), et un « id » valeur faite de « nom » ou « id » du champ d'entrée:

$.fn.setValidationResult = function(errorMessage) { 
    return this.each(function() { 
    var errId = 'errMsg_' + this.name, errMsg = $('#' + errId); 
    if (!errMsg.length) { 
     $(this).after($('<span></span>', { class: 'validation-error', id: errId })); 
     errMsg = $('#' + errId); 
    } 
    if (errorMessage) 
     errMsg.html(errorMessage).show(); 
    else 
     errMsg.html('').hide(); 
    }); 
}); 

Ensuite, vous pouvez simplement utiliser $(yourInput).setValidationResult(whatever); avec "tout" étant vide lorsque la validation passe.

Answer 4

Vous pouvez utiliser le plugin de validation jQuery

• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

qui a des options pour spécifier le message à côté de la commande ou de spécifier tous le message à un endroit.

Les démos sont disponibles à http://docs.jquery.com/Plugins/validation