폼 유효성 확인하기(Form Validation)(2)

자바스크립트 부분(JavaScript part)
자바스크립트의 document.getElementById(“[변수 variable]”.value)에서 변수에 해당하는 부분은 HTML에서 id=”변수 variable” 부분이다.
In JavaScript’s document.getElementById (“[variable]”.value), the part that corresponds to a variable is the id=”variable” part of HTML.

                const frmName     = document.getElementById("name").value;
                <input type="name" class="form-control" id="name" placeholder="당신의 이름을 입력하세요(Enter Your Name)" name="name">

                const frmPwd      = document.getElementById("pwd").value;
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">

버튼 클릭했을 때 폼 “frumSubmit()”이 실행된다.
When the button is clicked, the form “frumSubmit()” runs.

                <button type="button" onClick="frmSubmit();" class="btn btn-primary">Submit</button>

전체코드(full code)
-아래의 링크를 통해서 테스트 할 수 있습니다
You can test it through the link below.
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>

Leave a Reply Cancel reply