http://bassistance.de/jquery-plugins/jquery-plugin-validation/
간단하게 쓰기. class만 맞춰주면 OK.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이미지 추가 생성 화면</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/cms/make_new_image.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/cms/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/cms/jquery/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#mainForm").validate(); });
</script>
</head>
<body>
<form action="" id="mainForm">
컨텐트 종류 <s:select name="contentType" list="contentTypeList" listValue="label" listKey="key"></s:select>
<br>
원본 메타 필드명 <s:textfield name="srcMeta" cssClass="required"></s:textfield>
<br>
대상 메타 필드명 <s:textfield name="destMeta" cssClass="required"></s:textfield>
<br>
리사이즈 크기 : 가로 <s:textfield name="width" cssClass="required number"></s:textfield> 세로 <s:textfield name="height" cssClass="required number"></s:textfield>
<br>
<s:submit></s:submit>
</form>
</body>
</html>
|
경고문구 css 설정하기
label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
color: red;
font-style: italic
}
|
그밖의 여러가지 사용법 - 나만의 유효성검사룰 설정하기, ajax 등은 예제 참고.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="org.apache.commons.lang.StringUtils"%>
<%@ page import="com.omp.commons.utils.SessionUtil" %>
<%@ page import="com.omp.bp.cms.member.MemberConstants"%>
<%@ page import="com.omp.bp.cms.member.model.LoginUserInfo" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이미지 추가 생성 화면</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/cms/make_new_image.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/cms/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/cms/jquery/jquery.validate.js"></script>
<script type="text/javascript">
var m_browser;
var m_version;
function detectBrowser() {
if($.browser.msie) {
m_browser = "msie";
}
else if($.browser.safari) {
m_browser = "safari";
}
else if($.browser.opera) {
m_browser = "opera";
}
else if($.browser.mozilla) {
m_browser = "mozilla";
}
m_version = $.browser.version;
//alert(m_browser + " " + m_version);
}
$(document).ready(function(){
detectBrowser(); // browser/version check
// 폼 유효성 검사
$("#mainForm").validate({
submitHandler: function(form) {
// do other stuff for a valid form
disableSubmit();
form.submit();
}
});
/*$("#submitBtn").click(function(){ // 유효성 검사 통과했을 때만 실행하도록 수정
disableSubmit();
});*/
parentResize(); // admin poc 화면 크기 조절용
});
function disableSubmit() {
$("#submitBtn").hide();
$("#submitLbl").show();
}
function parentResize() {
<%
LoginUserInfo loginInfo = (LoginUserInfo)SessionUtil.getMemberSession(request);
boolean isAdmin = StringUtils.equalsIgnoreCase(loginInfo.getMemberType(), MemberConstants.MEMBER_TYPE_ADMIN);
%>
//운영자면 adminpoc의 프레임 크기 조절용 스크립트를 실행
var isAdmin = <%=isAdmin%>;
if(isAdmin) {
rsize();
}
}
function rsize() {
var iframe = document.getElementById( 'inneriframe' );
var height = Math.max( 200, document.body.scrollHeight + 500 );
iframe.src = '<%=loginInfo.getAdminpocResizeUrl()%>?height='+height;
}
</script>
</head>
<body>
<form action="${pageContext.request.contextPath}/common/makeNewImage.omp" id="mainForm" method="post">
컨텐트 종류 <s:select name="contentType" list="contentTypeList" listValue="label" listKey="key"></s:select>
<br>
원본 메타 필드명 <s:textfield name="srcMeta" cssClass="required"></s:textfield>
<br>
대상 메타 필드명 <s:textfield name="destMeta" cssClass="required"></s:textfield>
<br>
리사이즈 크기 : 가로 <s:textfield name="width" cssClass="required number"></s:textfield> 세로 <s:textfield name="height" cssClass="required number"></s:textfield>
<br>
<s:submit id="submitBtn" value="이미지 생성 시작"></s:submit><label id="submitLbl" style="display: none;">이미지 생성 처리중...</label>
</form>
</body>
</html>
|