{"id":391,"date":"2024-04-16T23:57:22","date_gmt":"2024-04-16T23:57:22","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=391"},"modified":"2024-04-19T03:29:58","modified_gmt":"2024-04-19T03:29:58","slug":"form-validation2","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/04\/16\/form-validation2\/","title":{"rendered":"\ud3fc \uc720\ud6a8\uc131 \ud655\uc778\ud558\uae30(Form Validation)(2)"},"content":{"rendered":"\n

\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubd80\ubd84(JavaScript part)
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 document.getElementById(“[\ubcc0\uc218 variable]”.value)\uc5d0\uc11c \ubcc0\uc218\uc5d0 \ud574\ub2f9\ud558\ub294 \ubd80\ubd84\uc740 HTML\uc5d0\uc11c id=”\ubcc0\uc218 variable” \ubd80\ubd84\uc774\ub2e4.
In JavaScript’s document.getElementById (“[variable]”.value), the part that corresponds to a variable is the id=”variable” part of HTML.<\/p>\n\n\n\n

                const frmName     = document.getElementById(\"name<\/mark>\").value;\n                <input type=\"name\" class=\"form-control\" id=\"name\"<\/mark> placeholder=\"\ub2f9\uc2e0\uc758 \uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694(Enter Your Name)\" name=\"name\">\n\n                const frmPwd      = document.getElementById(\"pwd<\/mark>\").value;\n                <input type=\"password\" class=\"form-control\" id=\"pwd\"<\/mark> placeholder=\"Enter password\" name=\"pswd\"><\/code><\/pre>\n\n\n\n
\ubc84\ud2bc \ud074\ub9ad\ud588\uc744 \ub54c \ud3fc “frumSubmit()”\uc774 \uc2e4\ud589\ub41c\ub2e4.
When the button is clicked, the form “frumSubmit()” runs.<\/p>\n\n\n\n
                <button type=\"button\" onClick=\"frmSubmit();\" class=\"btn btn-primary\">Submit<\/button><\/code><\/pre>\n\n\n\n

\uc804\uccb4\ucf54\ub4dc(full code)
-\uc544\ub798\uc758 \ub9c1\ud06c\ub97c \ud1b5\ud574\uc11c \ud14c\uc2a4\ud2b8 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4
You can test it through the link below.
https:\/\/freelifemakers.org\/lec\/form3.php<\/a><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n      <title>Bootstrap 5 Example<\/title>\n      <meta charset=\"utf-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n    <\/head>\n    <body>\n        <form name=\"frm\" action=\".\/form_action2.php\" method=\"get\">\n        <div class=\"mb-3 mt-3\">\n            <label for=\"name\" class=\"form-label\">\uc774\ub984(Name):<\/label>\n            <input type=\"name\" class=\"form-control\" id=\"name\" placeholder=\"\ub2f9\uc2e0\uc758 \uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694(Enter Your Name)\" name=\"name\">\n            <div id=\"errorName\"><\/div>\n        <\/div>\n        <div class=\"mb-3\">\n            <label for=\"pwd\" class=\"form-label\">Password:<\/label>\n            <input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Enter password\" name=\"pswd\">\n            <div id=\"errorPwd\"><\/div>\n        <\/div>\n            <div class=\"form-check mb-3\">\n            <label class=\"form-check-label\">\n            <input class=\"form-check-input\" type=\"checkbox\" name=\"remember\"> Remember me\n            <\/label>\n        <\/div>\n            <button type=\"button\" onClick=\"frmSubmit();\" class=\"btn btn-primary\">Submit<\/button>\n        <\/form>\n        <script>\n            function frmSubmit(){\n                const frmName     = document.getElementById(\"name\").value;\n                const frmPwd      = document.getElementById(\"pwd\").value;\n\n                errorName.innerHTML = \"\";\n                errorPwd.innerHTML  = \"\";\n\n                if(frmName == \"\"){\n                    errorName.innerHTML = \"<p>\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694(Please Enter Your Name)<\/p>\";\n                } else if(frmPwd == \"\"){\n                    errorPwd.innerHTML = \"<p>\ud328\uc2a4\uc6cc\ub4dc\ub97c \uc785\ub825\ud558\uc138\uc694(Please Enter Your Password)<\/p>\";\n                }else{\n                    frm.submit();\n                }\n            }\n        <\/script>\n    <\/body>\n<\/html>    <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubd80\ubd84(JavaScript part) \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 document.getElementById(“[\ubcc0\uc218 variable]”.value)\uc5d0\uc11c \ubcc0\uc218\uc5d0 \ud574\ub2f9\ud558\ub294 \ubd80\ubd84\uc740 HTML\uc5d0\uc11c id=”\ubcc0\uc218 variable” \ubd80\ubd84\uc774\ub2e4.In JavaScript’s document.getElementById (“[variable]”.value), the part that corresponds to a variable is the id=”variable” part of HTML. \ubc84\ud2bc \ud074\ub9ad\ud588\uc744 \ub54c \ud3fc “frumSubmit()”\uc774 \uc2e4\ud589\ub41c\ub2e4.When the button is clicked, the form “frumSubmit()” runs. \uc804\uccb4\ucf54\ub4dc(full code)-\uc544\ub798\uc758 \ub9c1\ud06c\ub97c \ud1b5\ud574\uc11c \ud14c\uc2a4\ud2b8 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4You can test it through […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-391","post","type-post","status-publish","format-standard","hentry","category-php","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=391"}],"version-history":[{"count":13,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/391\/revisions"}],"predecessor-version":[{"id":440,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/391\/revisions\/440"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}