폼 유효성 확인을 위해 innerHTML대신에 alert()을 사용할 수 있습니다.
아래의 코드에서 innerHTM 실행부분은 코멘트 처리했습니다.
노란색은 innerHTML을 위한 부분이고 녹색은 alert()을 위한 부분입니다.
document.getElementById(“[ID]”).focus();는 autofocus를 위한 부분입니다.
You can use alert() instead of innerHTML for form validation.
In the code below, the innerHTM execution part has been commented out.
The yellow part is for innerHTML and the green part is for alert().
document.getElementById(“[ID]”).focus(); is for autofocus.
아래의 링크를 통해서 테스트 할 수 있습니다
You can test it through the link below
https://freelifemakers.org/lec/form4-1.php
<?php
$fileName = "./form_action4.php";
if(!is_file($fileName)){
$form_action_name = basename($_SERVER['PHP_SELF']);
}else{
$form_action_name = "./form_action4.php";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 webform</title>
<!--이 부분은 html코멘트 영역 This part is the html comment area,마임타입설정 Mime type settings//-->
<meta charset="utf-8">
<!-- 모바일폰 스크린 옵션 Mobile phone screen options//-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--부트스트랩5 CDN방식 링크 Bootstrap 5 CDN method link//-->
<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>
<!-- 폼체크 innerHTML경고 메시지 출력 -->
<!-- Form check innerHTML warning message output //-->
<script>
function frmSubmit(){
//name input box에서 값을 가져오기
//Get value from name input box
const frmName = document.getElementById("name").value;
const frmEmail = document.getElementById("email").value;
const frmPwd = document.getElementById("pwd").value;
//이메일 및 웹사이트 유효성검사
//Regular expression for email validation
const regex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,3}$/;
//정규표현식과 비교하여 이메일테스트
//Test the email against the regular expression
const emailCheck = regex.test(frmEmail);
//에러메세지 초기화
//Reset error message
errorName.innerHTML = "";
errorEmail.innerHTML = "";
errorPwd.innerHTML = "";
//값의 존재 여부체크 ,공백이면 경고창 띄우기
//Check whether value exists, if blank, display warning window
if(frmName == ""){
//errorName.innerHTML ="<p>이름을 입력하세요(Please Enter Your Name)</p>";
alert("이름을 입력하세요(Please Enter Your Name)");
document.getElementById("name").focus();
return;
}else if(frmEmail == ""){
//errorEmail.innerHTML ="<p>Email을 입력하세요(Please Enter Your Email)</p>";
alert("Email을 입력하세요(Please Enter Your Email)");
document.getElementById("email").focus();
return;
}else if(emailCheck == false){
//errorEmail.innerHTML ="<p>정확한 Email을 입력하세요(Please enter the correct Email)</p>";
alert("정확한 Email을 입력하세요(Please enter the correct Email)");
document.getElementById("email").focus();
return;
}else if(frmPwd == ""){
//errorPwd.innerHTML ="<p>패스워드를 입력하세요(Please Enter Your Password)</p>";
alert("패스워드를 입력하세요(Please Enter Your Password)");
document.getElementById("pwd").focus();
return;
}else{
frm.submit();
}
}
</script>
</head>
<body>
<div class="container-sm">
<!--HTML폼시작 Start HTML form //-->
<!--폼이름 출력 Print form name //-->
<form id="frm" action="<?php echo $form_action_name; ?>" method="post">
<div class="mb-3">
<label for="name" class="form-label">이름(Name):</label>
<input type="text" class="form-control" id="name" placeholder="Enter Your Name" name="name" required>
<div id="errorName"></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="text" class="form-control" id="email" placeholder="ID@exmale.com" name="email" required>
<div id="errorEmail"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter your password" name="pswd" required>
<div id="errorPwd"></div>
</div>
<div class="mb-3">
<div class="form-check mb-3">
<label class="form-check-label">Remember me</label>
<input class="form-check-input" type="checkbox" name="remember">
</div>
</div>
<button type="button" class="btn btn-primary" onClick="frmSubmit();">Submit</button>
</form>
<!--HTML폼 끝 End of HTML form//-->
</div>
</body>
</html>