유효성 검사란 데이터 전송을 하기 위해 폼의 입력 필드에 값을 입력할 때 값이 정상적으로 입력되었는지 확인 하기 위한 부분 입니다.
이러한 폼의 유효성검사는 자바스크립트를 이용합니다.
오렌지색 컬러의 코드는 새롭게 추가된 코드 입니다.
Validation is the part to ensure that the value is entered normally when you enter the value in the input field of the form to transfer data.
Validation of these forms uses JavaScript.
The orange code is a newly added code.
1.이름 입력필드 확인하기 Check the Name Input Field
– 이름이 정상적으로 입력되었는지 체크합니다.
Check that the name is entered successfully.
– id=”name” : 자바스크립트에서 이 id 값을 이용해서 확인합니다.
JavaScript checks using this ID value.
– placeholder = “[텍스트 text]” : 입력필드에 아무 값이 입력되지 않은 경우 보여질 텍스트 입니다.
Text to be displayed if no value is entered in the input field.
<input type="name" class="form-control" id="name" placeholder="당신의 이름을 입력하세요(Enter Your Name)" name="name">2.패스워드 입력필드 확인하기 Check the Password Input Field
– 패스워드가 정상적으로 입력되었는지 체크합니다.
Check that the Passworrd is entered successfully.
– id=”pwd” name=”paswd”인 것을 주의하세요
Watch out for id=”pwd” name=”paswd”
– id는 자바스크립트에서 확인하기 위한 부분이고 name은 php에서 확인하기 위한 부분입니다.
id is the part to check in JavaScript and name is the part to check in php.
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">3.버튼 타입 수정Modify button type
– 버튼 타입을 submit에서 button으로 수정합니다.
Modify the button type from submit to button.
– 버튼을 클릭했을 때 실행될 자바스크립트 함수 이벤트를 추가합니다.
Adds a JavaScript function event that will run when the button is clicked.
<button type="button" onClick="frmSubmit();" class="btn btn-primary">Submit</button>
4. 유효성 검사 메세지를 보여줄 div태그 추가하기
Add div tag to show validation message
... <div id="errorName"></div> ...
... <div id="errorPwd"></div> ...
전체코드(full code)
-아래의 링크를 통해서 테스트 할 수 있습니다
You can test it through the link below.
test : https://freelifemakers.org/lec/form3.php
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form name="frm" action="./form_action2.php" method="get">
<div class="mb-3 mt-3">
<label for="name" class="form-label">이름(Name):</label>
<input type="name" class="form-control" id="name" placeholder="당신의 이름을 입력하세요(Enter Your Name)" name="name">
<div id="errorName"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<div id="errorPwd"></div>
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="button" onClick="frmSubmit();" class="btn btn-primary">Submit</button>
</form>
<script>
function frmSubmit(){
const frmName = document.getElementById("name").value;
const frmPwd = document.getElementById("pwd").value;
errorName.innerHTML = "";
errorPwd.innerHTML = "";
if(frmName == ""){
errorName.innerHTML = "<p>이름을 입력하세요(Please Enter Your Name)</p>";
} else if(frmPwd == ""){
errorPwd.innerHTML = "<p>패스워드를 입력하세요(Please Enter Your Password)</p>";
}else{
frm.submit();
}
}
</script>
</body>
</html>