커피와 개발자

간단한 폼검증 - Input text 본문

웹개발/자바스크립트(JavaScript)

간단한 폼검증 - Input text

광박이 2009. 7. 31. 11:28
728x90

HTML Input text 간단한 폼 검증

입력 폼 다 채우지 않으면 Input text box의 색을 바꾸고 경고창 띄우기

<!-- 1. 아래 코드를 <head></head> 태그 사이에 붙여 넣으세요 -->
<script>
<!--
function setColor(el, bg) {
    if (el.style) el.style.backgroundColor = bg;
}

function checkInput(form) {
    var bgBad = "#E4F3FB";
    var bgGood = "#FFFFFF";
    var valid = true;
    if (form.first.value == "") {
        valid = false;
        setColor(form.first, bgBad);
    } else {
        setColor(form.first, bgGood);
    }
    if (form.last.value == "") {
        valid = false;
        setColor(form.last, bgBad);
  	} else {
        setColor(form.last, bgGood);
    }
    if (!valid) alert("빈칸을 채워 주세요");
    return valid;
}
// -->
</script>
<!-- 2. 텍스트 입력 폼 작성 <BODY> 와 </BODY> 태그 사이에 붙여 넣으세요 -->
<form onsubmit="return checkInput(this);">
    이름 : <input type="text" name="first" size="15" value="">
    이메일 : <input type="text" name="last" size="15" value="">
    <input type="submit" value=" 입력하기 ">
</form>
728x90
저작자표시 동일조건

'웹개발 > 자바스크립트(JavaScript)' 카테고리의 다른 글

Ajax POST방식과 GET방식  (0) 2010.06.03
[style="display:~"] 파이어폭스와 EI  (0) 2010.05.26
ClipboardData  (0) 2009.11.06
팝업에서 부모에 값 전달  (0) 2009.08.11
간단한 폼검증 - Input checkbox  (0) 2009.07.31
공유하기 링크
'웹개발/자바스크립트(JavaScript)' Related Articles more
Comments