{"id":1638,"date":"2019-04-26T12:55:26","date_gmt":"2019-04-26T07:25:26","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1638"},"modified":"2019-04-26T12:55:26","modified_gmt":"2019-04-26T07:25:26","slug":"submit-button-correct-validation-regexp","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/","title":{"rendered":"Enable Submit Button After Correct Validation including regExp"},"content":{"rendered":"

We can find forms on almost every website. In this blog, we will see how we can validate user inputs with the help of JavaScript. Form validation is the process of verifying that a form has been filled in accurately before it is submitted.
\nHere, we’ll see if all the fields are of correct values, the submit button will get enabled. Here, I included regExp in the Email input field. A regular expression (regEx) is a structure that can be used to match character combinations in text strings, so they are appropriate for form validation. Once validation of all data is passed then enable the submit button for the user and they submit the form. But, if there is a validation error, such as anyone left blank or wrong input in the required field, the submit button is disabled. Here I show some images that help the readers to understand.<\/p>\n

 <\/p>\n

Form Validation on Submit Form<\/span><\/h3>\n

 <\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

When I gave wrong input in Email field or left blank the Name field, the submit button is disabled.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Let\u2019s see the following codes…..<\/em><\/p>\n

HTML<\/strong><\/span><\/h5>\n
<form class=\"form\">\r\n     <div class=\"row mb-26\">\r\n        <div class=\"col-md-2 col-sm-2 col-xs-12 text-right\"><label for=\"input-name\">Name<\/label><\/div>\r\n        <div class=\"col-md-10 col-sm-10 col-xs-12\">\r\n            <input type=\"text\" class=\"form-input text\" id=\"input-name\" name=\"fname\" oninput=\"validateForm()\" >\r\n        <\/div>\r\n     <\/div>\r\n     <div class=\"row mb-26\">\r\n        <div class=\"col-md-2 col-sm-2 col-xs-12 text-right\"><label for=\"input-mail\" >Email<\/label><\/div>\r\n         <div class=\"col-md-10 col-sm-10 col-xs-12\">\r\n             <input type=\"text\" name=\"email\" class=\"form-input text\" id=\"input-email\" oninput=\"validateForm()\">\r\n         <\/div>\r\n     <\/div> \r\n     <div class=\"row mb-26\">\r\n        <div class=\"col-md-2 col-sm-2 col-xs-12 text-right\"><label for=\"input-message\">Your Message<\/label>\r\n        <\/div>\r\n        <div class=\"col-md-10 col-sm-10 col-xs-12\">\r\n             <textarea name=\"message\" cols=\"36\" rows=\"5\" class=\"form-input\" id=\"input-message\" oninput=\"validateForm()\"><\/textarea>\r\n        <\/div>\r\n     <\/div> \r\n     <div class=\"row mb-26\">\r\n        <div class=\"col-md-7 col-sm-12 col-xs-12\">\r\n           <button type=\"submit\" class=\"submit-button\" disabled>Submit<\/button>\r\n        <\/div>\r\n     <\/div> \r\n<\/form><\/pre>\n
CSS<\/strong><\/span><\/h5>\n
\/* form-validation *\/\r\n\r\n.mb-26{\r\n   margin-bottom: 26px;\r\n}\r\n.submit-button{\r\n    padding: 14px 44px;\r\n    color: #fdfdfd;   \r\n    display: block;\r\n    margin: 0 auto;\r\n}\r\n.submit-button:disabled{\r\n   background: #c5dce7;\r\n}\r\n.form-input.text{\r\n     width: 34%;\r\n     height: 28px;\r\n  }\r\n}<\/pre>\n
JavaScript<\/strong><\/span><\/h5>\n
var inputName = document.getElementById('input-name');\r\nvar inputEmail = document.getElementById('input-email');\r\nvar inputMessage = document.getElementById('input-message');\r\nvar button = document.querySelector('.submit-button');\r\nvar regEx = \/\\S+@\\S+\\.\\S+\/; \/\/ string, white-space, @ , white-space, dot, white-space, value, string \/\/\r\nvar form = document.querySelector('.form');\r\n\r\nfunction validateForm(){\r\n    if (inputName.value !== \"\" && regEx.test(inputEmail.value) && inputMessage.value !== \"\"){\r\n       button.style.backgroundColor = '4b8aa7';\r\n       button.disabled = false;\r\n    } else {\r\n       button.style.backgroundColor = '#c5dce7';\r\n       button.disabled = true;\r\n    }\r\n}\r\nform.addEventListener('submit', function(event){\r\n     event.preventDefault();\r\n     console.log(\"submitted\")\r\n\r\n})\r\n\r\n\r\n\r\n<\/pre>\n
This is one of the form validation types. Later, I’ll show different types of form validation using different programming languages.<\/p>\n
<\/pre>\n","protected":false},"excerpt":{"rendered":"
We can find forms on almost every website. In this blog, we will see how we can validate user inputs with the help of JavaScript. Form validation is the process of verifying that a form has been filled in accurately before it is submitted. Here, we’ll see if all the fields are of correct values, […]<\/p>\n","protected":false},"author":31,"featured_media":1664,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[72,18,5],"tags":[73,112],"yoast_head":"\nEnable Submit Button After Correct Validation including regExp<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enable Submit Button After Correct Validation including regExp\" \/>\n<meta property=\"og:description\" content=\"We can find forms on almost every website. In this blog, we will see how we can validate user inputs with the help of JavaScript. Form validation is the process of verifying that a form has been filled in accurately before it is submitted. Here, we’ll see if all the fields are of correct values, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-26T07:25:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/04\/image2-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/04\/image2-1.jpg\",\"width\":400,\"height\":400},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/\",\"name\":\"Enable Submit Button After Correct Validation including regExp\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/#primaryimage\"},\"datePublished\":\"2019-04-26T07:25:26+00:00\",\"dateModified\":\"2019-04-26T07:25:26+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/submit-button-correct-validation-regexp\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\",\"name\":\"Munmun Das\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/033db0a0941d27e1e3e3bdc05f2e1189?s=96&r=g\",\"caption\":\"Munmun Das\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1638"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1638"}],"version-history":[{"count":11,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1638\/revisions"}],"predecessor-version":[{"id":1671,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1638\/revisions\/1671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1664"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}