유효성 검사 후 별도 스크립트 실행하기

일반적으로, 폼안에 놓여진 입력 컨트롤들의 유효성 검사를 위해서 ASP.NET validator들을 사용하시곤 하시는데요. 그 컨트롤을 사용할 경우에는, 추가적으로 여러분만의 스크립트를 실행하거나 하기가 좀 어렵다는 문제가 있었습니다.

 

예를 들어, 다음과 같은 처리를 하고자 한다면....

1. 버튼이 클릭될 경우, 모든 유효성 검사를 수행하게 하고...
2. 유효성 검사 통과 후에 "정말로 등록하시겠습니까?" 라는 confirm을 받아서 PostBack을 시키거나 취소한다.

 

이 문제를 풀어내기 위해서는, 과연 ASP.NET이 기본적으로 Validator들이 사용된 페이지에서 버튼 컨트롤을 위해 어떤 HTML을 생성해 내느냐를 알아내는 것이 필요합니다. 프로그램이란 뭔가 정규화된 규칙에 따라 움직이는 것이기에, Validator가 적용된 폼에서 ASP.NET이 버튼 컨트롤에 적용하는 특성들을 살펴보면, 뭔가 힌트를 얻을 수도 있을테니까요.

 

일반적으로 ASP.NET은 유효성 검사를 수행할 버튼 컨트롤들에 대해서 아래와 같은 파란색 코드를 일괄적으로 추가해준다는 것을 알수 있고,  바로 그 부분이 실제 유효성 검사를 수행하는 스크립트라고 인식할수 있을것입니다.

 

<input type="submit" name="SubscribeButton" value="등록"
    onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); "
    language="javascript" id="SubscribeButton" style="width:100px;" />

그렇다면, 이 시점에서 우리는 다음과 같은 가정을 해 볼 수 있습니다.

 

"버튼 서버 컨트롤에 onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " 라는 코드를 넣을 수 있다면, 그 버튼은 유효성 검사를 무조건 수행한다"

 

만일, A 라는 버튼이 있고, 그 버튼의 CauseValidation=false 라 하더라도, 위의 코드를 그 버튼에게 추가해주기만 한다면, A 라는 버튼이 유효성 검사를 수행하는 컨트롤처럼 동작할 수 있다는 것입니다.

 

자, 이제부터 본격적으로 우리가 원하는 처리를 하기 위해 따라서 해봅시다.

 

1 유효성 검사를 하고자 하는 버튼의 CauseValidation 속성 값을 false로 변경합니다.

 

CauseValidation을 true로 둔 상태에서, this.버튼아이디.Attributes["onclick"] = "스크립트 코드" 라고 해 주어도 자신의 스크립트를 동작하게 할 수는 있지만, 그 방법으로는 유효성 검사 이후에 나만의 스크립트를 수행할 수 없습니다. 오직, 유효성 검사 이전에만 가능하지요...

 

2 코드 비하인드의 Page_Load이벤트에 아래 내용을을 추가합니다.

 

private void Page_Load(object sender, System.EventArgs e)
{
    string orginValidateCode;

    // 유효성 검사가 실패했다면, 다음 스크립트로 진행하지 않고, 그 즉시 리턴하도록 한다.

    orginValidateCode = "if (typeof(Page_ClientValidate) == 'function') ";

    orginValidateCode += "if(!Page_ClientValidate()) return false;";
    string MyScriptCode = "if(!ConfirmUser()) return false;";

   

   //유효성검사를 하고자 하는 버튼의 Onclick이벤트에 위의 스크립트를 속성으로 추가합니다.
    this.SubscribeButton.Attributes["onclick"] = orginValidateCode + MyScriptCode;
}

 

3. 이제 HTML 페이지로 가서 정말로 등록할것인지를 확인하는 ConfirmUser() 스크립트를 추가해 주어야 할 것입니다.

 

<script language="javascript">
    function ConfirmUser()
    {
        if(confirm("가입하시겠습니까?"))
            return true;
        else
            return false;
    }
</script>

 

 

자료출처 : http://taeyo.pe.kr/