2009-10-12 3 views
1

(참고 : 내 원래 질문은 내 openid에 연결되지 않았습니다. 수정/업데이트/대응 가능하도록 여기에 다시 게시됩니다. 액세스 권한이있는 사람이 원래 질문을 삭제할 수있는 경우/questions/1554916/how-to-use -THE-livevalidation - 자바 스크립트 라이브러리 - 사용자 정의 유효성 검사 기능! 잘 될 woudl)livevalidation javascript 라이브러리 custom.validation 함수는 어떻게 사용합니까?

Heya의 여러분,

그래서 나와 함께 곰하시기 바랍니다이 모든 아주 새로운 오전!

필자는 필드의 livevalidation 검사와 함께 양식을 작성하고 ajax/json 검사를 사용하여 usename이 유효한지 확인했습니다. 표준 라이브 유효성 검사에서 정상적으로 진행되는 것 같습니다. 여기

내가 지금 무슨의 데모입니다 : link text

방법은 단순히 메시지가있는가에 뚜렷한 그것을 만들기로 변경 아약스 이름 확인에 responce을주는, 그래서를 사용하려면 livevalidation 검사를 통해 Ajax 응답을 관리 할 수 ​​있습니다. 따라서 공백을 확인한 다음 사용 중이며 유효하지 않은 값을 확인한 다음 확인을 통과하고 응답을 동일한 방식으로 출력 할 수 있습니다. 이 백그라운드에서 실행되는 JSON의 일원으로

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

:

내가 현재이 양식 코드가

<?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)'thats를 가리킬 수 있어야한다고 생각할 것이다. 그러나 나는 올바른 방법으로 그것을하고 있는지 의심 스럽다. 어떤 빛을 비추는 사람이 누구이든지 이해할 수 있는가? 뿐만 아니라 솔루션을 밝히기 !!

* 업데이트 *

내가 지금 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' 
}); 
"; 

그것을 내가 아키텍처 문제가있을 것으로 보인다 그러나 - 실시간 확인 즉각적인 대답을 원하며 아약스는 백그라운드에서 발생합니다. 나는 '관측자 패턴'을 조사 할 제안을 받았는데, 그것은 완전히 새로운 개념입니다. 저는 보통 CMS의 그래픽 디자인과 구조 측면을 가지고 놀고 있습니다!

내가 더 이상 도움이 필요하면 도움이 될 것입니다.

+0

이것은 JS 질문보다 훨씬 더 PHP 질문입니다. 그에 따라 태그를 조정하면 더 많은 응답을 얻을 수 있습니다. – machineghost

+0

감사합니다 machineghost, 나는 라이브 유효성 검사가 JS 라이브러리라는 사실에 대해 더 생각하고 있습니다. – Mizpah

답변

1

다음 링크의 코드 샘플을 시도하십시오. 그것은 나를 위해 일했습니다. 핵심은 로직을 별도의 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

여기에 작동하는 또 다른 예입니다. 내 isValidCreditCard 기능은 '에 대한'함수 내에서 중첩 된

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

.... against 함수는 my isValidCreditCard 함수가 반환 한 값을 반환합니다.

대신에 실제 함수를 넣을 수 있습니다. 그러나 그 이상의 내용은 아마도 혼란 스럽습니다. (예제에서 % [모듈러스]를 사용하는 이유는 무엇입니까? 아무도 그 연산자를 알지 못합니다!)

관련 문제