2. Views 폴더의 FormValidationDemo 폴더에 ClientValidation.cshtml 뷰 페이지를 생성하고 다음과 같이 코드를 작성한다. MVC의 헬퍼 메서드로 폼을 구성한 상태에서 제이쿼리, jQuery-Validation, jQuery-Validation-Unobtrusive 관련 스크립트를 포함하면 자동으로 클라이언트 측 유효성 검사가 진행된다. 지금 작업하고 있는 DotNetNote 프로젝트에는 이미 이 세 가지 스크립트가 포함되어 있다. 만약 없는 경우에는 bower.json 파일에 추가해서 프로젝트에 바로 포함시키거나, 직접 스크립트 파일을 적절한 폴더에 넣어 추가해도 된다. MVC 웹 응용 프로그램 기본 템플릿에는 이 세 가지 스크립트가 기본으로 포함되어 있으니 이를 뷰 페이지 하단에 추가한다.
▼ /Views/FormValidationDemo/ClientValidation.cshtml
@model DotNetNote.Models.MaximModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery 플러그인 기반 클라이언트 측 유효성 검사</title>
<style>
.input-validation-error {
border: 1px solid red;
}
</style>
</head>
<body>
<h2>jQuery 플러그인 기반 클라이언트 측 유효성 검사</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(false)
@Html.LabelFor(n => n.Name)
<text>: </text>
@Html.TextBoxFor(n => n.Name)
@Html.ValidationMessageFor(n => n.Name)
<br />
@Html.LabelFor(c => c.Content)
<text>: </text>
@Html.TextBoxFor(c => c.Content)
@Html.ValidationMessageFor(c => c.Content)
<br />
<input type=“submit” value=“전송” />
}
<script src=“~/lib/jquery/dist/jquery.js”></script>
<script src=“~/lib/jquery-validation/jquery.validate.js”></script>
<script src=
“~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js”></script>
</body>
</html>