Как я могу использовать библиотеку Javascript livevalidation с функцией custom.validation? - PullRequest
1 голос
/ 12 октября 2009

(примечание: мой оригинальный вопрос не был связан с моим openid - я делаю репост здесь, чтобы иметь возможность редактировать / обновлять / отвечать соответствующим образом - если кто-то, имеющий доступ, может удалить оригинальный вопрос: / questions / 1554916 / how-to- используйте функцию livevalidation-javascript-library-custom-validate, которая будет великолепна !!)

Heya Folks,

Я очень новичок во всем этом, поэтому, пожалуйста, потерпите меня!

Мне удалось создать форму с проверкой полей livevalidation, а также с проверкой ajax / json, чтобы убедиться, что имя пользователя допустимо. Кажется, я прекрасно ладил со стандартным живым подтверждением.

Вот демонстрация того, что у меня есть на данный момент: текст ссылки

Метод ответа на проверку имени пользователя ajax просто меняет a с сообщением, чтобы сделать его видимым, поэтому я хочу использовать проверку livevalidation для управления ответом ajax - так что я могу связать их вместе (проверьте пустое , затем используется, затем недействительно, затем передается как нормально) и мои ответы выводятся таким же образом.

У меня сейчас есть код этой формы:

<?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' />

Это часть json, которая работает в фоновом режиме:

<?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);
}
?>

Так что, глядя на документацию livevalidation, вы можете использовать пользовательскую проверку следующим образом:

// 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} } );

Я нахожу это очень загадочным - я думаю, что я должен быть в состоянии указать на 'function (r)', вот и все готово - но я сомневаюсь, что делаю это правильно,

Может ли кто-нибудь пролить свет, я (надеюсь!) Понимаю это, а также найду решение !!

* Обновления *

Теперь я считаю, что этот код для части validate.custom должен работать:

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' 
});
";

Однако, похоже, у меня проблема с архитектурой - проверка в реальном времени требует мгновенного ответа, и в фоновом режиме происходит ajax. У меня было предложение исследовать «модель наблюдателя», которая является для меня совершенно новой концепцией - я обычно играю с графическим дизайном и структурой стороны cms!

Буду признателен за любую дополнительную помощь / разъяснение, так как мне придется вернуться к этому и заставить его работать !!

Ответы [ 2 ]

1 голос
/ 28 апреля 2011

попробуйте пример кода по следующей ссылке. Это сработало для меня. Ключ заключается в том, чтобы написать логику в отдельной функции JavaScript и вызвать ее с помощью функции Validate.Custom.

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

Редактировать: Добавлен код по ссылке:

//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;
    }
}
0 голосов
/ 23 декабря 2011

Вот еще один пример, который работает.

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

Странная часть ...

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

... у которого моя функция isValidCreditCard вложена в функцию "против". Функция против просто возвращает то, что вернула моя функция isValidCreditCard.

Вместо этого вы можете поместить туда настоящую функцию, как в загадочном примере, но все, что угодно, кроме строки, может быть весьма запутанным. (Зачем использовать% [модуль] в примере? Никто не знает этот оператор!)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...