{"id":376,"date":"2024-04-11T01:48:25","date_gmt":"2024-04-11T01:48:25","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=376"},"modified":"2024-04-19T03:30:10","modified_gmt":"2024-04-19T03:30:10","slug":"form-validation","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/04\/11\/form-validation\/","title":{"rendered":"\ud3fc \uc720\ud6a8\uc131\ud655\uc778\ud558\uae30Form validation(1)"},"content":{"rendered":"\n

\uc720\ud6a8\uc131 \uac80\uc0ac\ub780 \ub370\uc774\ud130 \uc804\uc1a1\uc744 \ud558\uae30 \uc704\ud574 \ud3fc\uc758 \uc785\ub825 \ud544\ub4dc\uc5d0 \uac12\uc744 \uc785\ub825\ud560 \ub54c \uac12\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \uc785\ub825\ub418\uc5c8\ub294\uc9c0 \ud655\uc778 \ud558\uae30 \uc704\ud55c \ubd80\ubd84 \uc785\ub2c8\ub2e4.
\uc774\ub7ec\ud55c \ud3fc\uc758 \uc720\ud6a8\uc131\uac80\uc0ac\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud569\ub2c8\ub2e4.
\uc624\ub80c\uc9c0\uc0c9 \uceec\ub7ec\uc758 \ucf54\ub4dc\ub294 \uc0c8\ub86d\uac8c \ucd94\uac00\ub41c \ucf54\ub4dc \uc785\ub2c8\ub2e4.
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.\uc774\ub984 \uc785\ub825\ud544\ub4dc \ud655\uc778\ud558\uae30 Check the Name Input Field<\/strong>
– \uc774\ub984\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \uc785\ub825\ub418\uc5c8\ub294\uc9c0 \uccb4\ud06c\ud569\ub2c8\ub2e4.
Check that the name is entered successfully.
– id=”name” : \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uc774 id \uac12\uc744 \uc774\uc6a9\ud574\uc11c \ud655\uc778\ud569\ub2c8\ub2e4.
JavaScript checks using this ID value.
– placeholder = “[\ud14d\uc2a4\ud2b8 text]” : \uc785\ub825\ud544\ub4dc\uc5d0 \uc544\ubb34 \uac12\uc774 \uc785\ub825\ub418\uc9c0 \uc54a\uc740 \uacbd\uc6b0 \ubcf4\uc5ec\uc9c8 \ud14d\uc2a4\ud2b8 \uc785\ub2c8\ub2e4.
Text to be displayed if no value is entered in the input field.<\/p>\n\n\n\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\"><\/code><\/pre>\n\n\n\n
2.\ud328\uc2a4\uc6cc\ub4dc \uc785\ub825\ud544\ub4dc \ud655\uc778\ud558\uae30 Check the Password Input Field<\/strong>
– \ud328\uc2a4\uc6cc\ub4dc\uac00 \uc815\uc0c1\uc801\uc73c\ub85c \uc785\ub825\ub418\uc5c8\ub294\uc9c0 \uccb4\ud06c\ud569\ub2c8\ub2e4.
Check that the Passworrd is entered successfully.
– id=”pwd” name=”paswd”\uc778 \uac83\uc744 \uc8fc\uc758\ud558\uc138\uc694
Watch out for id=”pwd” name=”paswd”
– id\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \ud655\uc778\ud558\uae30 \uc704\ud55c \ubd80\ubd84\uc774\uace0 name\uc740 php\uc5d0\uc11c \ud655\uc778\ud558\uae30 \uc704\ud55c \ubd80\ubd84\uc785\ub2c8\ub2e4.
id is the part to check in JavaScript and name is the part to check in php.<\/p>\n\n\n\n
<input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Enter password\" name=\"pswd\"><\/code><\/pre>\n\n\n\n
3.\ubc84\ud2bc \ud0c0\uc785 \uc218\uc815Modify button type<\/strong>
– \ubc84\ud2bc \ud0c0\uc785\uc744 submit\uc5d0\uc11c button\uc73c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.
Modify the button type from submit to button.
– \ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc744 \ub54c \uc2e4\ud589\ub420 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218 \uc774\ubca4\ud2b8\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.
Adds a JavaScript function event that will run when the button is clicked.<\/p>\n\n\n\n
<button type=\"button\" onClick=\"frmSubmit();\" class=\"btn btn-primary\">Submit<\/button><\/code><\/pre>\n\n\n\n

4. \uc720\ud6a8\uc131 \uac80\uc0ac \uba54\uc138\uc9c0\ub97c \ubcf4\uc5ec\uc904 div\ud0dc\uadf8 \ucd94\uac00\ud558\uae30<\/strong>
Add div tag to show validation message<\/p>\n\n\n\n
... <div id=\"errorName\"><\/div> ...\n... <div id=\"errorPwd\"><\/div> ...<\/code><\/pre>\n\n\n\n

\uc804\uccb4\ucf54\ub4dc(full code)<\/strong>
-\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.
test : 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\"<\/mark> 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)\"<\/mark> name=\"name\">\n            <div id=\"errorName\"><\/div><\/mark>\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\"<\/mark> name=\"pswd\">\n            <div id=\"errorPwd\"><\/div><\/mark>\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();\"<\/mark> 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><\/mark>\n    <\/body>\n<\/html>    \n<\/code><\/pre>\n\n\n\n