There are times when you need to create a basic HTML form that provides validation to end users. Without leveraging a framework or additional libraries, this can be easily achieved by using JavaScript directly. This article walks through the basic steps of creating a simple validated form using basic selectors and error handling. Our requirements are:<\/p>\n\n\n\n
In real life we would most likely have a call to a web service or some other piece of code that would execute once a form was submitted with no errors.<\/p><\/blockquote>\n\n\n\n
To get started, you will need to create a directory structure on your local computer that resembles the following:<\/p>\n\n\n\n
- index.html (our main form)<\/li>
- js\/script.js (the JavaScript needed to validate our form inputs)<\/li>
- css\/style.css (our form styling)<\/li><\/ul>\n\n\n\n
Next, grab the html below to render the basic form we will be building in this exercise and copy this into a new file called index.html.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\n<head>\n <title>HTML5 Form<\/title>\n <link rel=\"stylesheet\" href=\"css\/style.css\" \/>\n<\/head>\n\n<body>\n <div class=\"container\">\n <h1>Basic Membership Form Example<\/h1>\n <form name=\"registration\" action=\"mailto:testemail@testemail.local\" onsubmit=\"return validateForm()\"\n method=\"post\" autocomplete=\"off\">\n <div class=\"form-row wrap\">\n <label for=\"firstname\">First Name:*<\/label>\n <input type=\"text\" class=\"alpha\" id=\"firstname\" placeholder=\"Enter first name\" \/>\n <div class=\"invalid-feedback\">Please enter a valid first name<\/div>\n <\/div>\n <div class=\"form-row\">\n <label for=\"lastname\">Last Name:*<\/label>\n <input type=\"text\" class=\"alpha\" id=\"lastname\" placeholder=\"Enter last name\" \/>\n <div class=\"invalid-feedback\">Please enter a valid last name<\/div>\n <\/div>\n <div class=\"form-row\">\n <label for=\"email\">Email:*<\/label>\n <input type=\"text\" id=\"email\" placeholder=\"Enter email\" \/>\n <div class=\"invalid-feedback\">Please enter a valid email address<\/div>\n <\/div>\n <div class=\"form-row\">\n <label for=\"confirmemail\">Confirm Email:*<\/label>\n <input type=\"text\" id=\"confirmemail\" placeholder=\"Confirm email\" \/>\n <div class=\"invalid-feedback\">Email address doesn't match<\/div>\n <\/div>\n <fieldset class=\"form-row\">\n <legend class=\"col-form-label\">Membership Type:*<\/legend>\n <div id=\"membership\" class=\"controls\">\n <div class=\"form-row\">\n <div class=\"col\">\n <div>\n <input type=\"checkbox\" id=\"membershipfree\" value=\"online\" \/>\n <label class=\"form-check-label\" for=\"membershiponline\">Online<\/label>\n <\/div>\n <div>\n <input type=\"checkbox\" id=\"membershipbasic\" value=\"paper\" \/>\n <label class=\"form-check-label\" for=\"membershippaper\">Paper \/ Mail<\/label>\n <div class=\"invalid-feedback\">\n Please select at least one membership option\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col\">\n <div>\n <input type=\"checkbox\" id=\"membershippremium\" value=\"premium\" \/>\n <label class=\"form-check-label\" for=\"membershippremium\">Premium Membership<\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/fieldset>\n <div class=\"form-row\">\n <button type=\"submit\" class=\"btn btn-primary\" name=\"submit\" id=\"submitform\" value=\"Submit\">\n Submit\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <script src=\"js\/script.js\"><\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\nThe HTML references our CSS \/ styles in the header and the JavaScript is referenced before the closing body tag at the bottom of the document. You will notice for every form element, I am using form-row classes, which are needed for styling as well as a class called invalid-feedback<\/strong>. We’ll be using this class to supply feedback to the end user if information has been entered incorrectly into the form. The idea behind this is to hide all of these invalid-feedback<\/strong> class elements on page load, and only make them visible if and when an error is registered in our JavaScript, which we will be getting to shortly.<\/p>\n\n\n\n
Another thing to note here is that within the form tag, I am calling a function called validateForm(). This function will return a boolean (true or false value) based on the state of the form once a user submits. If a false is returned, the form will not submit, otherwise if the form is filled out correctly, the form action ‘mailto’ will execute.<\/p>\n\n\n\n
Next we will style the form using Flexbox, which provides a nice way for us to control the layout of our form. For more information on Flexbox, be sure to visit CSS Tricks and review their Complete Guide to Flexbox<\/a> article. <\/p>\n\n\n\n
Copy the following code into a new file: css\/style.css.<\/p>\n\n\n\n
\/* Main Form Container *\/\n.container {\n font-family: Arial, Helvetica, sans-serif;\n max-width: 800px;\n margin: 2em auto;\n background-color: #f5f5f5;\n padding: 1rem;\n border-radius: 1rem;\n border: solid #ccc 1px;\n}\n\n\/* Error Handling *\/\n.invalid-feedback {\n display: none;\n margin-top: 0.25rem;\n font-size: 80%;\n color: #dc3545;\n flex: 100%;\n}\n.is-invalid ~ .invalid-feedback {\n display: block;\n}\n.is-invalid,\n.is-invalid ~ .form-check-label {\n border-color: #dc3545;\n color: #dc3545;\n}\n\n\/* Layout with Flexbox *\/\n.form-row {\n display: flex;\n justify-content: flex-end;\n padding: 0.5em;\n flex-wrap: wrap;\n}\nlabel {\n flex: 1;\n padding: 1em 0em;\n}\ninput,\nselect,\ntextarea {\n flex: 3;\n padding: 1em;\n}\n\n#area,\n.col {\n flex-grow: 1;\n}\n\n\/* Form Controls *\/\ninput {\n margin: 0.5em;\n border-radius: 4px;\n border: 1px solid #bbb;\n}\nselect {\n font-size: 1em;\n}\nfieldset {\n border: 1px solid #bbbbbb;\n margin-bottom: 10px;\n}\nlegend {\n padding: 0.8em;\n border: 1px solid #bbbbbb;\n font-size: 90%;\n}\nbutton {\n background: #808080;\n color: #ffffff;\n padding: 1em;\n font-size: 1em;\n}<\/code><\/pre>\n\n\n\nThe CSS contains a number of styles for the overall form container, error handling, and form layout using flexbox. Note the error handling code where I am setting invalid feedback to display:none, so that the error divs will not show on initial page load.<\/p>\n\n\n\n
Writing the JavaScript<\/h2>\n\n\n\n
To get us started, we need to define a number of variables that we will be using for our validation function. These include variables for error handling, form fields, and regular expressions. Our error handler is going to be a simple integer which will be initialized to zero once the validation function executes and updated if any errors are found. The form elements are going to be set using document.querySelector. For more on document.querySelector and a general overview of the DOM, see JavaScript Manipulating the Document Object Model (DOM)<\/a>. Finally, we’re going to want to use regular expressions to determine if our input is correct. In this basic example we are going to use two kinds of regular expressions to evaluate alpha text and email validation. If you are unfamiliar with regular expressions, take a look at my other article, Regular Expressions in JavaScript<\/a>. I use https:\/\/regexr.com\/<\/a> for experimenting with different regular expressions, and I encourage you to check it out as it is very helpful for testing your regex values. Let’s start putting this together. Copy the code below and place it into a new js\/script.js file.<\/p>\n\n\n\n
<\/p>\n\n\n\n
\/\/ Error handler\nlet errors;\n\n\/\/ Form Elements\nlet firstname = document.querySelector(\"#firstname\");\nlet lastname = document.querySelector(\"#lastname\");\nlet email = document.querySelector(\"#email\");\nlet confirmemail = document.querySelector(\"#confirmemail\");\nlet membership = document.querySelectorAll('input[type=\"checkbox\"]');\n\n\/\/ Regular Expressions\nlet alpha = \/^[a-z]+$\/i;\nlet emailValidation = \/^[a-z0-9._%+-]{1,64}@[a-z0-9.-]{1,252}\\.[a-z]{2,3}$\/i;<\/code><\/pre>\n\n\n\nIn the code above we are setting variables for our errors (handler), our fields using document.querySelector to target the associated elements from the DOM, and our two regular expressions. Under Form Elements, you will see standard use of document.querySelector for firstname, lastname, email, and confirmemail. These will set our variables to these HTML elements, which we will then be able to use to determine their inputted values. We are using querySelectorAll to store all checkboxes in an array, which we can then evaluate to determine if the minimum required number have been selected in the form. Note under Regular Expressions, alpha will be reused on the firstname and lastname fields. In real world situations, you would most likely use other regular expressions to evaluate other types of data including numerical, etc.<\/p>\n\n\n\n
Our last step is to write the validation function, which will both evaluate every field to determine if an error occurred, and it will also update the error (handler) variable, which will prevent the form from being submitted if one or more validation errors have occurred. Copy the code below and place it under the previous code from above in your script.js file.<\/p>\n\n\n\n
\/\/ Validation Function\nfunction validateForm() {\n errors = 0;\n let membershipchecked = document.querySelectorAll(\n 'input[type=\"checkbox\"]:checked'\n );\n\n \/\/ Textboxes\n alpha.test(firstname.value) ? valid(firstname) : invalid(firstname);\n alpha.test(lastname.value) ? valid(lastname) : invalid(lastname);\n emailValidation.test(email.value) ? valid(email) : invalid(email);\n confirmemail.value == email.value\n ? valid(confirmemail)\n : invalid(confirmemail);\n\n \/\/ Radio and Checkboxes\n membershipchecked.length < 1\n ? membership.forEach(element => invalid(element))\n : membership.forEach(element => valid(element));\n\n \/\/ Validation Helpers\n function invalid(element) {\n element.classList.add(\"is-invalid\");\n errors++;\n }\n function valid(element) {\n element.classList.remove(\"is-invalid\");\n }\n\n return errors > 0 ? false : true;\n}<\/code><\/pre>\n\n\n\nYou will see in this function I have defined two validation helpers, which get passed an element and will add or remove a class called ‘is-invalid’. If an element gets sent to invalid, is-invalid class will be added to that element. If an element is sent to valid, the function will check to see if is-invalid exists, and if it does it will remove it. Finally, if an element is invalid, the errors variable will be incremented, meaning the form will not be submitted. Remember once the user fixes any errors and clicks submit, the validateForm function will run again resetting errors to zero before re-running the validation checks. <\/strong><\/p>\n\n\n\n
Let’s take a look back at our earlier CSS (Lines 12 – 27)<\/p>\n\n\n\n
\/* Error Handling *\/\n.invalid-feedback {\n display: none;\n margin-top: 0.25rem;\n font-size: 80%;\n color: #dc3545;\n flex: 100%;\n}\n.is-invalid ~ .invalid-feedback {\n display: block;\n}\n.is-invalid,\n.is-invalid ~ .form-check-label {\n border-color: #dc3545;\n color: #dc3545;\n}<\/code><\/pre>\n\n\n\nNotice the sibling combiner<\/a> next to the is-invalid class. This will enable us to set the invalid-feedback class (which contains the error messages) to either block (to display) or none (to hide). Going back to our validateForm function, we initialize the errors variable with zero each time this function is called. In addition to this we also create a second checkbox array, only this time we are setting a variable called membershipchecked to contain only those selected checkboxes. Next we’re going to run our validation tests against firstname and lastname form elements by using our alpha regular expression to test or evaluate the value entered. If the value is not alphabetic, the invalid function is called passing the form element. Likewise if the value is alphabetic, the valid function is called, again passing the form element passed. We use a ternary operator<\/a> in both of these tests. <\/p>\n\n\n\n
Next our email validation test is executed and we compare the values of both email fields. Again, we call the invalid or valid function depending on the result. Finally we evaluate our checkboxes for membership. If we have less then 1 checkbox selected, we want to apply the is-invalid class to each box. This is done by using a forEach statement. In the code above we are using an arrow function to simply reduce the code. For more information on arrow functions, take a look at JavaScript Arrow Functions: How They Work<\/a>.<\/p>\n\n\n\n