Comment utiliser la fonction livevalidation de la bibliothèque javascript livevalidation?

Question

(note: ma question initiale n'était pas liée à mon ID d'utilisateur - Je suis en train de la redéposer ici pour pouvoir modifier/mettre à jour/répondre en conséquence - si quelqu'un avec accès pouvait supprimer la question originale:/questions/1554916/how-to-use -le-LiveValidation-javascript-bibliothèque-validate personnalisée fonction conseillerai être génial !!)

Folks Heya,

Je suis très nouveau à tout cela alors s'il vous plaît garder avec moi!

J'ai créé un formulaire avec vérification des champs en directvalidation, et aussi avec une vérification ajax/json pour voir si un nom d'utilisateur est valide. Il me semble que je m'entends bien avec la validation en direct standard.

Voici une démonstration de ce que j'ai en ce moment: link text

La méthode pour donner un responce au chèque ajax nom d'utilisateur change simplement un avec un message pour le rendre visable, donc je veux utiliser un livevalidation vérifier pour gérer la réponse ajax - donc je peux les relier ensemble (vérifier pour vide, puis en cours d'utilisation, puis invalide, puis passer comme ok) et avoir mes réponses sortie de la même manière.

J'ai actuellement ce code de formulaire:

<?php 

$script = " 
$('uname').addEvent('blur', function(e) { 
    e = new Event(e).stop(); 
    // Show the spinning indicator when pressing the submit button... 
    $('indicator1').setStyle('display', 'block'); 

    var username = $('uname').value; 
    if (username != '') { 
     var url = 'index.php?option=com_chronocontact&chronoformname=custom_livevalidation_test&task=extra&format=raw'; 
     var jSonRequest = new Json.Remote(url, { 
      onComplete: function(r) { 
       $('indicator1').setStyle('display','none'); 
       if (r.username_ok) { 
       $('username_msg').setHTML(\"<span style='color:green;'>Username '\"+username+\"' is OK</span>\"); 
       } else { 
       $('username_msg').setHTML(\"<span style='color:red;'>Sorry, username '\"+username+\"' is already taken</span>\"); 
       } 
     } 
     }).send({'username': username}); 
    } 
}); 
"; 

global $mainframe; 
if ($mainframe->isSite()) 
{ 

$doc =& JFactory::getDocument(); 
$script = " 
window.addEvent('domready', function() { 
$script 
}); 
"; 
$doc->addScriptDeclaration($script); 
}; 


$script = " 
var uname = new LiveValidation('uname', { 
    validMessage: 'This is a valid username', 
    wait: 500 
}); 
uname.add(Validate.Presence, { 
    failureMessage: 'Username must not be blank!' 
}); 
uname.add(Validate.Format, { 
    pattern: /^[a-zA-Z\-_]{4,16}$/, 
    failureMessage: 'Username must be between 4 and 16 characters' 
}); 
"; 

global $mainframe; 
if ($mainframe->isSite()) 
{ 

$doc =& JFactory::getDocument(); 
$script = " 
window.addEvent('domready', function() { 
$script 
}); 
"; 
$doc->addScriptDeclaration($script); 
}; 
?> 


<div> 
<span class="cf_label">Username: </span> 
<input style="" id="uname" name="uname" class="" title="" value="" type="text"> 
<span id="indicator1" style="display: none"><img src="/images/hourglass.gif" alt="checking..." /></span> 
<div id='username_msg'></div> 
</div> 
<br /> 
<input type='submit' name='submit' value='submit' /> 

Ceci étant la partie JSON qui fonctionne en arrière-plan:

<?php 
$json = stripslashes($_POST['json']); 
$json = json_decode($json); 

if ($json->username){ 
    $db =& JFactory::getDBO(); 
    $query = " 
     SELECT COUNT(*) 
      FROM `jos_users` 
      WHERE `username` = ".$db->quote($json->username).";"; 
    $db->setQuery($query); 
    $response = (bool) !$database->loadResult(); 
    $response = array('username_ok' => $response); 
    echo json_encode($response); 
} 
?> 

Ainsi, la recherche à la documentation LiveValidation, vous pouvez utiliser une validation personnalisée de cette façon:

// Pass a function that checks if a number is divisible by one that you pass it in args object 
// In this case, 5 is passed, so should return true and validation will pass 
Validate.Custom(55, { against: function(value,args){ return !(value % args.divisibleBy) }, args: {divisibleBy: 5} }); 

Je trouve cela très cryptique - I Je pense que je devrais être capable de pointer vers 'fonction (r)' tout est prêt là-bas - mais je doute que je le fais de la bonne façon,

Quelqu'un peut-il faire la lumière, je l'espère (je l'espère!) pour le comprendre ainsi que découvrir une solution !!

* Mises à jour *

Je suis maintenant porté à croire que ce code pour la partie validate.custom devrait fonctionner:

var uname = new LiveValidation('uname', { 
    validMessage: 'This is a valid username', 
    wait: 500 
}); 
uname.add(Validate.Presence, { 
    failureMessage: 'Username must not be blank!' 
}); 
uname.add(Validate.Custom('uname', { against: function(r){ 
return !(r.username_ok) }, args: {} }), 
failureMessage: 'This username is already taken' 
}); 
uname.add(Validate.Format, { 
    pattern: /^[a-zA-Z\-_]{4,16}$/, 
    failureMessage: 'Username must be between 4 and 16 characters' 
}); 
"; 

Cependant, il semble que j'ai un problème d'architecture - validation en direct veut une réponse instantanée, et ajax a lieu en arrière-plan. J'ai eu une suggestion pour étudier le «modèle d'observateur» c'est un concept entièrement nouveau pour moi - je joue habituellement avec le côté de conception et de structure graphique d'un cms!

Toute aide supplémentaire/clarification appréciée car je vais devoir revenir à cela et le faire fonctionner!

Answer 1

essayez l'exemple de code dans le lien suivant. Cela a fonctionné pour moi. La clé consiste à écrire la logique dans une fonction JavaScript séparée et à l'appeler avec la fonction Validate.Custom.

http://www.experts-exchange.com/codeSnippetPopup.jsp?csid=259114

Edit: Ajout de code à partir du lien:

//input Form 
<form action="#" method="post"> 
    <label for="ip">IP:</label> 
    <input type="text" name="ip" id="ip"/> 
    <br/> 
    <label for="ip">Case:</label> 
    <input type="text" name="ticket" id="ticket"/> 
    <br/> 
    <input type="submit" value="Submit" name="submit" onclick="checkInput()"/>       
</form> 

/// JS function 
function checkInput() { 
    var ip = new LiveValidation('ip', {onlyOnSubmit: true }); 
    ip.add(Validate.Presence); 
    ip.add(Validate.Custom, { against: function(value){ return isValidIPAddress(value) }, failureMessage: "IP is not valid" }); 
    var ticket = new LiveValidation('ticket', {onlyOnSubmit: true }); 
    ticket.add(Validate.Presence); 
    ticket.add(Validate.Custom, { against: function(value){ return Case(value) }, failureMessage: "Case is not valid" }); 

    var ipSubmit = ip.form.onsubmit; 
    var ticketSubmit = ticket.form.onsubmit; 
    ip.form.onsubmit = function(){ 
    var validIP = ipSubmit(); 
    var validCase = ticketSubmit(); 
    if((validIP)& (validCase)) 
     getActionBack('0'); 
     return false; 
    } 
} 

Answer 2

Voici un autre exemple qui fonctionne.

f1.add(
    Validate.Custom, 
    { 
     against: function (value, args) { return isValidCreditCard(value, args.cardType) }, 
     args: { cardType: "Visa" }, 
     failureMessage: "Credit Card number is not valid" 
    } 
); 

La partie est bizarre ...

against: function (value, args) { return isValidCreditCard(value, args.cardType) } 

... qui a ma fonction isValidCreditCard imbriquée dans la fonction 'contre'. La fonction contre retourne juste ce que ma fonction isValidCreditCard a retournée.

Vous pouvez y mettre la fonction réelle à la place, tout comme l'exemple cryptique, mais tout ce qui est plus qu'une ligne serait probablement très confus. (Pourquoi utiliser% [module] dans l'exemple? Personne ne connaît cet opérateur!)