[jQuery] form validation

프로그래밍/Web 2011. 3. 2. 15:24 Posted by galad
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>


저작자표시 비영리 동일조건

'프로그래밍 > Web' 카테고리의 다른 글

[jsp] include  (0) 2011.05.25
[jsp/servlet] jsp 와 servlet 의 차이  (0) 2010.10.29
[펌] jQuery Fundamentals  (1) 2010.10.07
[html] 웹페이지에서 마우스 툴팁(Tooltip; 말풍선) 태그(Tag)  (0) 2010.05.31
[script] 정규식  (0) 2010.05.20
 

티스토리툴바