{"id":1985,"date":"2014-12-25T13:15:40","date_gmt":"2014-12-25T11:15:40","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1985"},"modified":"2018-06-19T23:06:39","modified_gmt":"2018-06-19T20:06:39","slug":"javascript-form-validation-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/","title":{"rendered":"JavaScript Form Validation Example"},"content":{"rendered":"

EDITORIAL NOTE<\/strong>: In this post, we feature a comprehensive JavaScript Form Validation Example. Validation is the process of ensuring that user input is clean, correct, and useful.<\/p>\n

If you’re looking to build an interactive website, which contains any form of input, then you should validate the data you get from the users.<\/p>\n

If it’s a registration form you have to validate the name and surname fields, the e-mail, username, age, zip code and everything else, so that you don’t send unnecessary calls to your server. Below you’ll find out how you can do that using JavaScript.<\/p>\n

[ulp id=’tCIwOngQUb3zSUuF’]<\/p>\n

What are we validating?<\/h2>\n

Let’s start with building a registration form with multiple input fields, so that we can have something more concrete to work on. Create an HTML file named index.html<\/code> and write this code in it:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Validation<\/title>\r\n    <script src="validation.js"><\/script>\r\n<\/head>\r\n<body onload="document.registration.userid.focus();">\r\n\r\n<h1>Registration Form<\/h1>\r\n<form name='registration' onSubmit="return formValidation();">\r\n    <ul>\r\n        <li>\r\n            <label for="userid">User id:<\/label>\r\n            <input type="text" name="userid" size="12" \/>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label for="passid">Password:<\/label>\r\n            <input type="password" name="passid" size="12" \/>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label for="username">Name:<\/label>\r\n            <input type="text" name="username" size="50" \/>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label for="address">Address:<\/label>\r\n            <input type="text" name="address" size="50" \/>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label for="country">Country:<\/label>\r\n            <select name="country">\r\n                <option selected="" value="Default">(Please select a country)<\/option>\r\n                <option value="AF">Afghanistan<\/option>\r\n                <option value="AL">Albania<\/option>\r\n                <option value="ALG">Algeria<\/option>\r\n                <option value="AND">Andorra<\/option>\r\n                <option value="ANG">Angola<\/option>\r\n            <\/select>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label for="zip">ZIP Code:<\/label>\r\n            <input type="text" name="zip" \/>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label for="email">Email:<\/label>\r\n            <input type="text" name="email" size="50" \/>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label id="gender">Sex:<\/label>\r\n            <input type="radio" name="sex" value="Male" \/>\r\n            <span>Male<\/span>\r\n            <input type="radio" name="sex" value="Female" \/>\r\n            <span>Female<\/span>\r\n        <\/li>\r\n\r\n        <li>\r\n            <label>Language:<\/label>\r\n\r\n\r\n                <input type="checkbox" name="en" value="en" checked \/>\r\n                <span>English<\/span>\r\n\r\n\r\n                <input type="checkbox" name="nonen" value="nonen" \/>\r\n                <span>Non English<\/span>\r\n\r\n        <\/li>\r\n\r\n        <li><input type="submit" name="submit" value="Submit" \/><\/li>\r\n    <\/ul>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
This is the whole HTML code for the registration form. We haven’t made it look pretty, since we’re only going to use it for demonstration purposes. We have assigned it the name “Registration Form”, and then have put the following labels and input fields in an unordered list: user id, password, name, address, zip code, e-mail and about. Also we have included two checklists, respectively labeled as sex and language. Moreover, we have included a dropdown for countries (we only listed the first five, not the complete list of countries) and a submit button. Now we can go on and validate the information we get from these inputs.<\/p>\n
Validation functions<\/h2>\n
Now that we have a registration form from which to get the information, we can start working on the validation functions. First of all, we create a JavaScript file named validation.js<\/code> (or anything you want, but then you would have to change the name when scripting it).<\/p>\n
User Id validation<\/strong>
\nThe first field to validate is the user id. Take a look at the function:<\/p>\n
\r\nfunction validateUsername(fld) {\r\n    var error = "";\r\n    var illegalChars = \/\\W\/; \/\/ allow letters, numbers, and underscores\r\n\r\n    if (fld.value == "") {\r\n        fld.style.background = 'Yellow';\r\n        error = "You didn't enter a username.\\n";\r\n        alert(error);\r\n        return false;\r\n\r\n    } else if ((fld.value.length < 5) || (fld.value.length > 12)) {\r\n        fld.style.background = 'Yellow';\r\n        error = "The username is the wrong length.\\n";\r\n        alert(error);\r\n        return false;\r\n\r\n    } else if (illegalChars.test(fld.value)) {\r\n        fld.style.background = 'Yellow';\r\n        error = "The username contains illegal characters.\\n";\r\n        alert(error);\r\n        return false;\r\n\r\n    } else {\r\n        fld.style.background = 'White';\r\n    }\r\n    return true;\r\n}\r\n<\/pre>\n
By using this function, we require the user to not leave the input field blank, and that his\/her username only contains letters, numbers and underscores, but not forward slash or backslash. The function puts out an alert if the field is left empty, the username length is less than 5 or more than 12 and also if the username contains illegal characters.<\/p>\n
Password validation<\/strong>
\nPasswords are another form of input that requires validation. Check the code below:<\/p>\n
\r\nfunction validatePassword(fld) {\r\n    var error = "";\r\n    var illegalChars = \/[\\W_]\/; \/\/ allow only letters and numbers\r\n \r\n    if (fld.value == "") {\r\n        fld.style.background = 'Yellow';\r\n        error = "You didn't enter a password.\\n";\r\n        alert(error);\r\n        return false;\r\n \r\n    } else if ((fld.value.length < 7) || (fld.value.length > 15)) {\r\n        error = "The password is the wrong length. \\n";\r\n        fld.style.background = 'Yellow';\r\n        alert(error);\r\n        return false;\r\n \r\n    } else if (illegalChars.test(fld.value)) {\r\n        error = "The password contains illegal characters.\\n";\r\n        fld.style.background = 'Yellow';\r\n        alert(error);\r\n        return false;\r\n \r\n    } else if ( (fld.value.search(\/[a-zA-Z]+\/)==-1) || (fld.value.search(\/[0-9]+\/)==-1) ) {\r\n        error = "The password must contain at least one numeral.\\n";\r\n        fld.style.background = 'Yellow';\r\n        alert(error);\r\n        return false;\r\n \r\n    } else {\r\n        fld.style.background = 'White';\r\n    }\r\n   return true;\r\n}\r\n<\/pre>\n
Again, we only allow letters and numbers (but no underscores this time around) and we put out an alert if the field is left empty, if it contains illegal characters, or if it does not contain at least one number.<\/p>\n
Name validation<\/strong>
\nTo validate the users name, write this code:<\/p>\n
\r\nfunction allLetter(uname)\r\n{\r\n    var letters = \/^[A-Za-z]+$\/;\r\n    if(uname.value.match(letters))\r\n    {\r\n        return true;\r\n    }\r\n    else\r\n    {\r\n        alert('Username must have alphabet characters only');\r\n        return false;\r\n    }\r\n}\r\n<\/pre>\n
This function returns true if the name is composed by letters and whitespaces only, and puts out an alert if not.<\/p>\n
Address validation<\/strong>
\nWe validate the users address like this:<\/p>\n
\r\nfunction alphanumeric(uadd)\r\n{\r\n    var letters = \/^[0-9a-zA-Z]+$\/;\r\n    if(uadd.value.match(letters))\r\n    {\r\n        return true;\r\n    }\r\n    else\r\n    {\r\n        alert('User address must have alphanumeric characters only');\r\n        return false;\r\n    }\r\n}\r\n<\/pre>\n
By using this code snippet we put out an alert if the address does not include alphanumeric characters only.<\/p>\n
Country Validation<\/strong>
\nSince you have given the users a list of countries to use from, the condition for validation is just choosing a country from that list. The code would be this:<\/p>\n
\r\nfunction countryselect(ucountry)\r\n{\r\n    if(ucountry.value == "Default")\r\n    {\r\n        alert('Select your country from the list');\r\n        return false;\r\n    }\r\n    else\r\n    {\r\n        return true;\r\n    }\r\n}\r\n<\/pre>\n
If the users just leaves the default one as a value, an alert would be presented to him\/her.<\/p>\n
ZIP code validation<\/strong>
\nThe ZIP code should be numbers only, so with the following function we put out an alert that says “ZIP code should have numeric characters only”:<\/p>\n
\r\nfunction allnumeric(uzip)\r\n{\r\n    var numbers = \/^[0-9]+$\/;\r\n    if(uzip.value.match(numbers))\r\n    {\r\n        return true;\r\n    }\r\n    else\r\n    {\r\n        alert('ZIP code must have numeric characters only');\r\n        return false;\r\n    }\r\n}\r\n<\/pre>\n
Email validation<\/strong>
\nEmail is one of the most used input fields in forms, together with username and password fields. It is also one of those that most need a validation function, which should look something like this:<\/p>\n
\r\nfunction checkEmail() {\r\n\r\n    var email = document.getElementById('txtEmail');\r\n    var filter = \/^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$\/;\r\n\r\n    if (!filter.test(email.value)) {\r\n    alert('Please provide a valid email address');\r\n    email.focus;\r\n    return false;\r\n }\r\n}\r\n<\/pre>\n
This function checks if the string which should be an email contains characters in uppercase, lowercase and numbers in it’s first part, then an”@” sign, then again lowercase, uppercase or number, then a dot, and finally 2 to 4 characters again in uppercase, lowercase or numbers. If this is not the structure of the string, it puts out an alert, saying that the email is invalid.<\/p>\n
Gender validation<\/strong>
\nThe input for gender is in the form as radio buttons, which should be clicked. The validation function will look like below:<\/p>\n
\r\nfunction validgender(mgender,fgender)\r\n{\r\n    x=0;\r\n\r\n    if(mgender.checked)\r\n    {\r\n        x++;\r\n    } if(fgender.checked)\r\n{\r\n    x++;\r\n}\r\n    if(x==0)\r\n    {\r\n        alert('Select Male\/Female');\r\n        return false;\r\n    }\r\n    else\r\n    {\r\n        alert('Form Successfully Submitted');\r\n        window.location.reload()\r\n        return true;}\r\n}\r\n<\/pre>\n
This function only makes sure that one of the options is checked, else it puts out an alert asking the user to check the button. The same function only with different variables is used to validate the language.<\/p>\n
The mother validator<\/h2>\n
All these functions we wrote should be concluded in a single validation function that will be called on onSubmit<\/code>. This function would be like so:<\/p>\n
\r\nfunction formValidation()\r\n{\r\n    var uid = document.registration.userid;\r\n    var passid = document.registration.passid;\r\n    var uname = document.registration.username;\r\n    var uadd = document.registration.address;\r\n    var ucountry = document.registration.country;\r\n    var uzip = document.registration.zip;\r\n    var uemail = document.registration.email;\r\n    var mgender = document.registration.msex;\r\n    var fgender = document.registration.fsex; \r\n    \r\n    if(validateUsername(uid,5,12))\r\n    {\r\n        if(validatePassword(passid,7,12))\r\n        {\r\n            if(allLetter(uname))\r\n            {\r\n                if(alphanumeric(uadd))\r\n                {\r\n                    if(countryselect(ucountry))\r\n                    {\r\n                        if(allnumeric(uzip))\r\n                        {\r\n                            if(ValidateEmail(uemail))\r\n                            {\r\n                                if(validgender(mgender,fgender))\r\n                                {\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    return false;\r\n}\r\n<\/pre>\n
Note that this main validator called formValidator<\/code> is executed as soon as the submit button is clicked.<\/p>\n
And that’s about it.<\/p>\n
Download the source code<\/h2>\n
This was an example of form validation using JavaScript.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: FormValidation<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"
EDITORIAL NOTE: In this post, we feature a comprehensive JavaScript Form Validation Example. Validation is the process of ensuring that user input is clean, correct, and useful. If you’re looking to build an interactive website, which contains any form of input, then you should validate the data you get from the users. If it’s a …<\/p>\n","protected":false},"author":25,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nJavaScript Form Validation Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about JS Form Validation? Check out our Example where we see how to validate the fields so you don't send unnecessary calls to server!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Form Validation Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about JS Form Validation? Check out our Example where we see how to validate the fields so you don't send unnecessary calls to server!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-25T11:15:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-19T20:06:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"JavaScript Form Validation Example\",\"datePublished\":\"2014-12-25T11:15:40+00:00\",\"dateModified\":\"2018-06-19T20:06:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\"},\"wordCount\":1789,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\",\"name\":\"JavaScript Form Validation Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2014-12-25T11:15:40+00:00\",\"dateModified\":\"2018-06-19T20:06:39+00:00\",\"description\":\"Interested to learn about JS Form Validation? Check out our Example where we see how to validate the fields so you don't send unnecessary calls to server!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Form Validation Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Form Validation Example - Web Code Geeks - 2026","description":"Interested to learn about JS Form Validation? Check out our Example where we see how to validate the fields so you don't send unnecessary calls to server!","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:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Form Validation Example - Web Code Geeks - 2026","og_description":"Interested to learn about JS Form Validation? Check out our Example where we see how to validate the fields so you don't send unnecessary calls to server!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2014-12-25T11:15:40+00:00","article_modified_time":"2018-06-19T20:06:39+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"JavaScript Form Validation Example","datePublished":"2014-12-25T11:15:40+00:00","dateModified":"2018-06-19T20:06:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/"},"wordCount":1789,"commentCount":4,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/","name":"JavaScript Form Validation Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2014-12-25T11:15:40+00:00","dateModified":"2018-06-19T20:06:39+00:00","description":"Interested to learn about JS Form Validation? Check out our Example where we see how to validate the fields so you don't send unnecessary calls to server!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-form-validation-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Form Validation Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1985"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}