2013-03-06 4 views
0

유효성 검사기 플러그인을 사용하여 사이트에 다양한 비밀번호 필드를 추가합니다. 각 비밀번호 필드는 성공적인 비밀번호 입력시 관련 다운로드 링크를 릴리스합니다. 문제는 올바른 암호를 입력하면 관련된 다운로드 링크 만 표시되는 것이 아니라 모든 다운로드 링크가 표시된다는 것입니다. 모든 필드는 동일한 암호를 가지며 시간이 지남에 따라 더 많은 파일이 추가 될 것입니다. 모든 파일 대신 관련 다운로드 링크 만 표시하는 방법을 파악하려고합니다.관련 다운로드 링크를 표시하는 jQuery 유효성 검사기

jQuery(document).ready(function(){ 

jQuery(".article-form").hide(); 
jQuery(".download-file").hide(); 

jQuery('.article-link').click(function() { 
     jQuery(this).siblings('.article-form').fadeIn(); 
    }); 


    jQuery.validator.addMethod("pw_check", function (value) { 
     return (value == 'password'); 
    }, "Invalid password"); 


    jQuery(".article-form").validate({ 
     rules: { 
      password: { 
       required: true, 
       pw_check: true 
      } 
     }, 
     submitHandler: function (form) { 
      jQuery(".article-form").hide(); 
      jQuery(".download-file").fadeIn("slow"); 
     } 
    }); 

}); 
+0

을의 기억 '.download-file' 모든 항목에서 페이드 인을 실행합니다. 또한, .hide()는 실제로 아무것도 보호하지 않습니다. 그냥 디스플레이에서 숨기는 것입니다. 당신이 보안에 대해 진정으로 걱정하지 않는다면 나는 이것을 추천하지 않을 것입니다. –

답변

1

내가 콘텐츠를 보호하기위한 도구로 jQuery를 또는 클라이언트 측 코드를 사용하는 것이 좋습니다 않을 : http://jsfiddle.net/rqGWK/

jQuery를 :
가 여기에 jsfiddle입니다 (암호는 '비밀'이다). 진정한 보안이 아닙니다.

질문에 대답하려면 .download-file.parent()에두고 .validate() 함수를 포장하여 각 양식의 유효성을 검사하십시오.

DEMO 업데이트되었습니다.

jQuery('.article-link').click(function() { 
    if(jQuery(this).siblings('.download-file').css('display')=='none') 
     jQuery(this).siblings('.article-form').fadeIn(); 
}); 

jQuery(".article-form").each(function() { 
    jQuery(this).validate({ 
     rules: { 
      password: { 
       required: true, 
       pw_check: true 
      } 
     }, 
     submitHandler: function (form) { 
      jQuery(form).hide(); 
      jQuery(form).siblings(".download-file").fadeIn("slow"); 
     } 
    }); 
}); 
+0

작은 버그 : 링크가 이미 잠금 해제되어있는 경우 양식이 다시 동일하게 나타납니다. – Sam

+0

@Sam 업데이트했습니다. –

+0

@Michael_B 완벽하게, 매력을 일했습니다. 저 마이클을위한 환호! – user1374796

0

이와 비슷한?

DEMO VIEW

jQuery(document).ready(function(){ 

jQuery(".article-form").hide(); 
jQuery(".download-file").hide(); 

var actual; 
var validates = []; 

jQuery('.article-link').click(function() { 
    actual = $(this).closest('.article-download'); 
if(!validates[actual.index()]){ 
    $(".article-form").hide() 
    $(".article-form").eq(actual.index()).fadeIn(); 
} 
}); 


jQuery.validator.addMethod("pw_check", function (value) { 
    return (value == 'password'); 
}, "Invalid password"); 


jQuery(".article-form").validate({ 
    rules: { 
     password: { 
      required: true, 
      pw_check: true 
     } 
    }, 
    submitHandler: function (form) { 
     validates[actual.index()] = true; 
     jQuery(".article-form").hide(); 
     jQuery(".download-file").eq(actual.index()).fadeIn("slow"); 
    } 
}); 

}); 

추신 : 클라이언트 측 바이 패스 가능한 것입니다, 당신은 관련`.download-file` 및 ID 및 쇼 대신을 줄 필요가 서버 측 컨트롤

관련 문제