2010-08-07 5 views
1

어제 저는 this question을 게시했지만 다른 문제가 있습니다.jquery 플러그인 확인. 한 번만 임의의 성공 메시지를 생성하십시오.

나는 JQuery와 유효성 검사 플러그인을 사용하여 다음과 같은 코드가 있습니다 :

 //array of success messages and randomly select one 
    var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!","Yay!", "Success!", "Ok!", "Perfect!","Sweet!" ]; 
function successMessage(label) { 
return messages[Math.floor(Math.random() * messages.length)]; 
} 

그럼 내 유효성 검사 코드의 성공

...success: function(label) { 
       if(!$(label).hasClass("valid")){ 
      label.addClass("valid").text(successMessage()); 
      } 
     }... 

무엇이 일어나고있는 것은 형태가 유효한 것으로 될 때마다 그 (의 keyup 또는 foucus에) 성공 메시지를 재생성합니다. 나는 클래스가 "valid"클래스를 추가했기 때문에 논리적 인 단계는 레이블에 "유효한"클래스가 있는지 검사하는 것이므로 이미 하나가 있기 때문에 메시지를 추가하지 않는 것입니다. 그러나 이것은 작동하지 않습니다. 다른 아이디어라도 좋을 것입니다.

편집 : 그래서 더 연구하고 생각한 후에. 나는 그 문제가 "valid"클래스가 제거되고, time form이 (keyup, submit, 등등) 검증 될 때마다 추가된다고 확신한다. 가장 쉬운 방법은 label의 값을 선택하는 것이다. 결과가 배열과 일치하는지 살펴보고, 그렇다면 다른 것을하지 않고 성공 메시지를 추가하십시오. 내가 틀렸을 수도있다. 나는 또한 내가 처음으로 그 질문을 가장 잘 표현했다고 생각하지 않는다. 사용자가 입력하는 동안 유효성 검사 메시지가 변경되는 것은 바보처럼 보입니다. 당신이 성공 메시지는 다음 문제가 무엇인지 볼 수 있습니다 계속 입력 얻을 때까지 당신이 필드에 입력하면 설명과 예제 코드에 대한 많은 제안 후

편집 2 나는이 링크 http://jsfiddle.net/Ye3Ls/20/를 게시하고있다. 유효 플러그 인을 찾았습니다 here 모든 환자에게 감사드립니다.

$(label).addClass("valid").text(successMessage()); 

보다는 : 나는 그것을 당신이 말 뜻처럼 보이는

+2

'이것은 그러나 작동하지 않습니다.' – Reigel

+0

코드 출력에 영향을 미치지 않습니다. – BandonRandon

+1

과 효과가 없다는 것을 의미 ?? – Reigel

답변

1

successMessage의 매개 변수로 레이블이 필요하지 않습니다. $(label) jQuery를 부착 새 레이블의 jQuery 객체를 생성합니다 :

function successMessage() { 
    return messages[Math.floor(Math.random() * messages.length)]; 
} 

나는 라벨이 일을 JQuery와 객체가 이미 켜져있는 경우 믿습니다.이 시도 : 심지어

if(!label.hasClass("valid")){ 
    label.addClass("valid").text(successMessage()); 
} 

또는

if(label.not(".valid")){ 
    label.addClass("valid").text(successMessage()); 
} 

또는 더 나은 :

label.not(".valid").addClass("valid").text(successMessage()); 

[편집] 질문 후

if(label.text() === ''){ 
    label.not(".valid").addClass("valid").text(successMessage()); 
} 
else { 
    label.addClass("valid"); 
} 

내가 있으리라 믿고있어 의견에 요청너 valid 클래스를 label에 추가해야합니다. 그런 다음 else 문을 제거하십시오.

또한 텍스트가 label 인 유일한 방법은 successMessage입니다. 따라서 label에 텍스트를 추가 할 필요가 없습니다. 그것은 동일하게 유지됩니다.

플러그인에서 HTML 요소의 클래스를 변경하는 경우 이는 코드의 심각한 부작용이며 나는 개인적으로이를 참지 않을 것입니다.

아마도 논리적 인 일은 제출을 한 후에 콘텐츠를 다시로드하는 것입니다. 그것이 사실이라면 제출하기 전에 DOM에 대한 모든 jQuery 조작을 잃어 버리게됩니다. 새로운 내용이 다시로드되기 때문입니다.

앞으로는 실제 플러그인에 링크를 추가하고 더 완전한 코드로 작업하는 것이 중요합니다. @Nick Craver는 jsfiddle.net을 사용하고 jsbin.com을 사용하여 샘플 코드를 게시합니다. 이는 문제를 재현하고 해결할 수 있도록 모든 협력 업체의 공동 노력이 될 수 있습니다.

[편집 1A] Here it is

문제는 라벨이 한번 이상 생성되고 있다는 점이다. 내 의견으로는이 플러그인은 작동하기 쉽지 않습니다.

오류 배치 및 성공 논리를 변경해야했습니다.

errorPlacement: function(label, element) { 
    // position error label after generated textarea 
    var name = element.attr('name'); 
    if ($('#' + name + '_label').length === 0) { 

     label.attr('id', name + '_label'); 

     label.insertAfter(element); 

     if (element.is("textarea")) { 
      label.css({'padding-left': '105px'}) 
     } 
    } 
}, 

success: function(label) { 
    var name = label.attr('for'); 
    $('#' + name + '_label').not('.valid').removeClass('error').addClass('valid').text(successMessage()); 
} 
+0

에 대한 변수이기 때문에 그들은 똑같은 일을합니다. 감사합니다, 나는 작동 할 것이라고 생각하지만 어떤 이유로 폼이 검증 될 때마다 클래스를 추가하고 제거합니다. label의 값이'messages' 배열에 있는지 검사 할 방법이 있습니까? – BandonRandon

+0

제안을 주셔서 감사합니다. 나는 여전히 의미있는 질문을 작성하는 방법을 배우고 있습니다.) 문제를 보여주는 예제로 질문을 다시 업데이트했습니다. – BandonRandon

+0

jquery를 사용할 때 FF로 방화 광구를 사용하지 않으면해야합니다. 바로'input # name'에 이름을 입력하면 다음과 같이 라벨이 생성됩니다 :''. 따라서 오류 및 유효한 클래스가 모두 레이블에 적용되는 것 같습니다. – Gutzofter

0

와 in_array 또는 has_value() 같은 것을 사용할 필요가 있다고 생각

label.addClass("valid").text(successMessage()); 
+0

레이블이 유효성 검사 플러그인으로 정의되는 변수이기 때문에 이것이 문제라고 생각하지 않습니다. – BandonRandon

0

을 라벨이 변수 인 경우, 그리고 label.addClass ("유효")이 잘 작동, 당신은 왜 사용 확인하지 :

경우 (! ((라벨) .hasClass ("유효"))) {

대신 if (! $ (label) .hasClass ("valid")) {

+0

레이블은 $ (label) – BandonRandon

관련 문제