{"id":33,"date":"2024-10-19T16:51:02","date_gmt":"2024-10-19T16:51:02","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=33"},"modified":"2025-04-05T10:50:02","modified_gmt":"2025-04-05T10:50:02","slug":"form-validation","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/form-validation\/","title":{"rendered":"How to Create Form Validation Using HTML CSS and JavaScript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"33\" class=\"elementor elementor-33\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75fb0d3 e-flex e-con-boxed e-con e-parent\" data-id=\"75fb0d3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4c3150 elementor-widget elementor-widget-text-editor\" data-id=\"f4c3150\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In today&#8217;s web development, creating easy-to-use forms for user signup plays a vital role in providing a great user experience. A well-crafted form helps collect essential data like name, email address, and password, as well as provide guidance and feedback to users.\u00a0This post explains how to create a simple yet effective signup form with Bootstrap 4 responsive design and JavaScript input validation.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-163bdb2 elementor-widget elementor-widget-heading\" data-id=\"163bdb2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Container and Card Layout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-037b1c8 elementor-widget elementor-widget-text-editor\" data-id=\"037b1c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The form is wrapped inside a\u00a0<code>container<\/code>\u00a0class to ensure that it is centered on the page and fits within the overall layout. The actual form fields are placed inside a\u00a0<strong>Bootstrap card<\/strong>\u00a0(<code>&lt;div class=\"card p-3\"&gt;<\/code>), providing a clean, professional appearance with added padding for a better user experience. The card layout also makes the form stand out visually on the webpage, giving it a polished look.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f47abd4 elementor-widget elementor-widget-code-highlight\" data-id=\"f47abd4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"container\"> \n<div class=\"row justify-content-center\">\n<div class=\"col-lg-5 mt-5\">\n  <div class=\"card p-3\">\n  <h1 class=\"text-center\">Signup Form<\/h1><br>\n  <form action=\"\"method=\"POST\"onsubmit=\"return abc()\">\n        <div class=\"row\">\n            <div class=\"col-lg-6\">\n                <div class=\"form-group\">\n                    <span id=\"sp1\"style=\"color: red\"><\/span>\n                    <input type=\"text\"placeholder=\"First Name\"class=\"form-control\"id=\"fname\">\n                <\/div>\n            <\/div>\n            <div class=\"col-lg-6\">\n                <div class=\"form-group\">\n                    <span id=\"sp2\"style=\"color: red\"><\/span>\n                    <input type=\"text\"placeholder=\"Last Name\"class=\"form-control\"id=\"lname\">\n                <\/div>\n            <\/div>\n        <\/div>\n      <span id=\"sp3\"style=\"color: red\"><\/span>\n      <input type=\"text\"placeholder=\"Email\" id=\"email\"class=\"form-control\">\n      <br>\n      <span id=\"sp4\"style=\"color: red\"><\/span>\n      <input type=\"text\"placeholder=\"Password\" id=\"password\"class=\"form-control\">\n      <br>\n      <span id=\"sp5\"style=\"color: red\"><\/span> <span id=\"sp6\"style=\"color: red\"><\/span>\n      <input type=\"text\"placeholder=\"Conform Password\" id=\"cpassword\"class=\"form-control\">\n      <br>\n      <input type=\"submit\"class=\"btn btn-success\">\n    <\/form>\n<\/div>\n  \n<\/div>\n<\/div>\n<\/div>\n      <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8137f8c elementor-widget elementor-widget-heading\" data-id=\"8137f8c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Form Fields<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a22dd4 elementor-widget elementor-widget-text-editor\" data-id=\"9a22dd4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The form captures key information such as:<\/p><p><strong>First Name<\/strong>\u00a0and\u00a0<strong>Last Name<\/strong>: First name and last name input will show to the user that they will fill the first name and last name in the input fields.<\/p><p><strong>Email Address<\/strong>: Emails show that they fill email on input email field because without email field it will show an error and ask you that filling email field is mandatory.<\/p><p><strong>Password and Confirm Password<\/strong>: Here, it will ask you if the password and confirm password will not match then it will show an error and say fill the same password, the same password that the password input will fill you have to fill the confirm password otherwise it will show an error.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-660fb3f elementor-widget elementor-widget-heading\" data-id=\"660fb3f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript Input Validation\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-868b991 elementor-widget elementor-widget-code-highlight\" data-id=\"868b991\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\nfunction abc() {\n    var fname = $(\"#fname\").val().trim();\n    var lname = $(\"#lname\").val().trim();\n    var email = $(\"#email\").val().trim();\n    var password = $(\"#password\").val().trim();\n    var cpassword = $(\"#cpassword\").val().trim();\n    var f1 = 0, f2 = 0, f3 = 0, f4 = 0, f5 = 0, f6 = 0;\n    \n    if(fname.length == 0) {\n        f1 = 1;\n    }\n    if(lname.length == 0) {\n        f2 = 1;\n    }\n    if(email.length == 0) {\n        f3 = 1;\n    }\n    if(password.length <= 8) {\n        f4 = 1;\n    }\n    if(cpassword.length <= 8) {\n        f5 = 1;\n    }\n    if(password != cpassword) {\n        f6 = 1;\n    }\n    \n    if(f1 == 1) {\n        $(\"#sp1\").text(\"Enter First Name\");\n    } else {\n        $(\"#sp1\").text(\"\");\n    }\n    if(f2 == 1) {\n        $(\"#sp2\").text(\"Enter Last Name\");\n    } else {\n        $(\"#sp2\").text(\"\");\n    }\n    \n    if(f3 == 1) {\n        $(\"#sp3\").text(\"Enter Email\");\n    } else {\n        $(\"#sp3\").text(\"\");\n    }\n    \n    if(f4 == 1) {\n        $(\"#sp4\").text(\"Enter Password (minimum 8 characters)\");\n    } else {\n        $(\"#sp4\").text(\"\");\n    }\n    \n    if(f5 == 1) {\n        $(\"#sp5\").text(\"Enter Confirm Password\");\n    } else {\n        $(\"#sp5\").text(\"\");\n    }\n    \n    if(f6 == 1) {\n        $(\"#sp6\").text(\"Passwords do not match\");\n    } else {\n        $(\"#sp6\").text(\"\");\n    }\n    \n    return f1 == 0 && f2 == 0 && f3 == 0 && f4 == 0 && f5 == 0 && f6 == 0;\n}\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15f77a5 elementor-widget elementor-widget-text-editor\" data-id=\"15f77a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A key part of this form&#8217;s functionality is the JavaScript validation applied before submission. The validation script, written in jQuery, checks for several criteria:<\/p><p><strong>All fields must be filled out.<\/strong><br \/>The password must be at least 8 characters long.<br \/>The &#8220;Confirm Password&#8221; field must match the &#8220;Password&#8221; field.<br \/>The script ensures that users provide the correct information and displays real-time feedback by showing error messages in red under the respective input fields.<\/p><p><strong>Here\u2019s an example of how the validation\u00a0function\u00a0works:<\/strong><\/p><p>This script ensures that users get immediate feedback if they try to submit incomplete or incorrect information. It enhances user experience by preventing unnecessary form submissions and providing helpful hints on how to fix the issues.<\/p><p>\u00a0<\/p><h4 style=\"font-size: 25px;\">Conclusion<\/h4><p><br \/>By combining Bootstrap 4 for responsive design and JavaScript for validation, this signup form ensures both visual appeal and functionality. The form is mobile-friendly, adaptable to different screen sizes, and provides real-time feedback to users, reducing the chance of submission errors and enhancing overall user experience.<\/p><p>This basic form can be extended further by integrating additional fields, more complex validation rules, or connecting it to a back-end system to process the\u00a0submitted\u00a0data.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s web development, creating easy-to-use forms for user signup plays a vital role in providing a great<\/p>\n","protected":false},"author":1,"featured_media":51,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[2,3,5,6],"class_list":["post-33","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-form-validation","tag-form-validation-in-javascript","tag-javascript-form","tag-javascript-form-validation"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Form Validation Using HTML CSS and JavaScript<\/title>\n<meta name=\"description\" content=\"Forms play an important role in web development, allowing users to input and submit their data. However, to ensure the accuracy and integrity of the data.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/form-validation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Form Validation Using HTML CSS and JavaScript\" \/>\n<meta property=\"og:description\" content=\"Forms play an important role in web development, allowing users to input and submit their data. However, to ensure the accuracy and integrity of the data.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/form-validation\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-19T16:51:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:50:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/registeration-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1342\" \/>\n\t<meta property=\"og:image:height\" content=\"564\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Form Validation Using HTML CSS and JavaScript","description":"Forms play an important role in web development, allowing users to input and submit their data. However, to ensure the accuracy and integrity of the data.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/form-validation\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Form Validation Using HTML CSS and JavaScript","og_description":"Forms play an important role in web development, allowing users to input and submit their data. However, to ensure the accuracy and integrity of the data.","og_url":"https:\/\/codingtutorials.in\/form-validation\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-10-19T16:51:02+00:00","article_modified_time":"2025-04-05T10:50:02+00:00","og_image":[{"width":1342,"height":564,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/registeration-1.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/form-validation\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/form-validation\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"How to Create Form Validation Using HTML CSS and JavaScript","datePublished":"2024-10-19T16:51:02+00:00","dateModified":"2025-04-05T10:50:02+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/form-validation\/"},"wordCount":456,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/form-validation\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/registeration-1.webp","keywords":["Form Validation","Form Validation in Javascript","Javascript Form","Javascript Form Validation"],"articleSection":["Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/form-validation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/form-validation\/","url":"https:\/\/codingtutorials.in\/form-validation\/","name":"How to Create Form Validation Using HTML CSS and JavaScript","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/form-validation\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/form-validation\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/registeration-1.webp","datePublished":"2024-10-19T16:51:02+00:00","dateModified":"2025-04-05T10:50:02+00:00","description":"Forms play an important role in web development, allowing users to input and submit their data. However, to ensure the accuracy and integrity of the data.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/form-validation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/form-validation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/form-validation\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/registeration-1.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/registeration-1.webp","width":1342,"height":564},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/form-validation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"How to Create Form Validation Using HTML CSS and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":11,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":2955,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/33\/revisions\/2955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/51"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}