폼입력시 필수 입력사항을 간단하게 제작하는 방법입니다

폼 양식을 작성할때 아이디,이메일,이름 작성할때

입력되지 않은경우 

아이디를 입력하세요

이메일을 입력하세요

이름을 입력하세요 라는 필수 입력사항을 만들때 사용하는 방법입니다

if 문으로 value값의 유무를 통해서 작업할수 있지만

그렇게 하지 않고

입력양식에 요소를 추가 하여 처리 하는 방법입니다

 

writeSubmit(form) 함수를 활용합니다

입력하는 곳에는

<input type="text" name="user_id" value="" s_required itemname="아이디">

이렇게 s_required itemname="아이디" 요소를 추가 하면 됩니다

<script>
/******************************************************************/
/* 폼 체크를 위한 함수시작       */
/******************************************************************/
function writeSubmit(form){
var arrAttr  = new Array ("s_required", "trim", "minlength", "email", "nospace");
    wrestMsg = "";
    wrestFld = null;
    var attr = null;

    // 해당폼에 대한 요소의 갯수만큼 돌려라
    for (var i = 0; i < form.elements.length; i++) {
// Input tag 의 type 이 text, file, password 일때만
        if (form.elements[i].type == "text" || 
form.elements[i].type == "file" || 
            form.elements[i].type == "password" ||
form.elements[i].type == "select-one" || 
            form.elements[i].type == "textarea") {
            // 배열의 길이만큼 돌려라
            for (var j = 0; j < arrAttr.length; j++) {
// 배열에 정의한 속성과 비교해서 속성이 있거나 값이 있다면
                if (form.elements[i].getAttribute(arrAttr[j]) != null) {
switch (arrAttr[j]) {
case "s_required"  : wrestRequired(form.elements[i]); break;
                        case "trim"      : wrestRequired(form.elements[i]); break;
                        case "minlength" : wrestMinlength(form.elements[i]); break;
                        case "email"     : wrestEmail(form.elements[i]); break;
                        case "nospace"   : wrestNospace(form.elements[i]); break;
                        default : break;
                    }
                }
            }
        }
}

    // 필드가 null 이 아니라면 오류메세지 출력후 포커스를 해당 오류 필드로 옮김
    // 오류 필드는 배경색상을 바꾼다.
    if (wrestFld != null) {
alert(wrestMsg);
//      wrestFld.style.backgroundColor = wrestFldBackColor;
        try{wrestFld.focus();}catch(e){}
        return false;
    }

    if (form.oldsubmit && form.oldsubmit() == false)  {
return false;
    }

    return true;
}

function wrestItemname(fld){
        var itemname = fld.getAttribute("itemname");
        if (itemname != null && itemname != "")
            return itemname;
        else
            return fld.name;
}

// 양쪽 공백 없애기
function wrestTrim(fld){
var pattern = /(^s*)|(s*$)/g; // s 공백 문자
    fld.value = fld.value.replace(pattern, "");
    return fld.value;
}

function wrestRequired(fld){
if (wrestTrim(fld) == "") {
if (wrestFld == null) {
if(fld.type == "select-one"){
wrestMsg = wrestItemname(fld) + "을(를) 선택해주세요.
";
}else{
wrestMsg = wrestItemname(fld) + "는(은) 필수 입력사항입니다.
";
}
wrestFld = fld;
}
    }
}

    // 최소 길이 검사
function wrestMinlength(fld){
var len = fld.getAttribute("minlength");
    if (fld.value.length < len) {
if (wrestFld == null) {
wrestMsg = wrestItemname(fld) + "는(은) 최소 " + len + "자 이상 입력하세요.
";
            wrestFld = fld;
        }
    }
}

// 전자메일주소 형식 검사
function wrestEmail(fld){
    if (!wrestTrim(fld)) return;
//var pattern = /(S+)@(S+).(S+)/; 전자메일주소에 한글 사용시
    var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+).([0-9a-zA-Z_-]+)/;
if (!pattern.test(fld.value)) {
if (wrestFld == null) {
wrestMsg = wrestItemname(fld) + "는(은) 전자메일주소 형식이 아닙니다.
";
                wrestFld = fld;
            
        }
    }
}
/******************************************************************/
/* 폼 체크를 위한 함수 끝       */
/******************************************************************/
</script>
<script>
    function WRITE(){
        var form=document.form;
        if(writeSubmit(form)==false){
            return;
        }
        form.submit();
        
    }
</script>
<?=$user_id?>
<form name="form" method="post" action="<?=$_SERVER[PHP_SELF]?>" enctype="multipart/form-data">
    <div>아이디</div>
    <div><input type="text" name="user_id" value="" s_required itemname="아이디"></div>
    <div><input type="text" name="user_id1" value="" s_required itemname="아이디1"></div>
    <div><input type="text" name="user_id2" value="" s_required itemname="아이디2"></div>
    <div><input type="button" value="보내기" onclick="WRITE()"></div>
</form>