{"id":3074,"date":"2013-03-14T19:05:52","date_gmt":"2013-03-14T19:05:52","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3074"},"modified":"2013-03-14T19:05:52","modified_gmt":"2013-03-14T19:05:52","slug":"validate-textbox-in-jquery-examplesdemo","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/validate-textbox-in-jquery-examplesdemo\/","title":{"rendered":"Validate Textbox In jQuery Examples\/Demo"},"content":{"rendered":"<p>Ever wondered <em><strong>how to validate textbox in jQuery<\/strong><\/em>? If yes, here is an article that will serve as a very simple guide. In this article, I am going to share very easy way to validate a single textbox or multiple textboxes when a form is submitted. Additionally, you will be able to add colors to the textbox indicating error message and remove that color if the textbox validates successfully. The examples are very easy to follow and a demo is provided so that you can check them out in real time.<\/p>\n<p><!--more--><\/p>\n<h2>How To\u00a0Validate Textbox In jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3074\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s assume that we have a form that contains two input textboxes with ID &#8220;first_name&#8221; and &#8220;last_name&#8221;. To make this really easy to understand, I am going to keep this example very short and very simple. We will see two variations of this. They are the following:<\/p>\n<p>1. When the form is submitted, both the textboxes will be checked to see if they are empty. If yes, an alert will be shown that will show the error message. You can then enter the info &amp; then submit the form. Then the checks will be made again. If both the fields are filled, then the form is submitted. \u00a0So note that the fields will be checked to see if they are both blank or not. Ideally, you may want to add more validation but for the sake of this article, let&#8217;s keep it this simple.<\/p>\n<p>2. This second set of variation covers all what we are doing in the\u00a0variation\u00a0above. Added to that, we are going to add a red background color to the textbox that is empty, just to show that there is an error in that field. Also we will focus the field that has an error so that the user can type automatically without having to manually click in it.<\/p>\n<p>So let&#8217;s get started, shall we?<\/p>\n<p><strong>Here is the common HTML for all the following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Example\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Example to Validate a Textbox using jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n.error {\n\tbackground-color: #FFD9D9;\n\tborder: 1px solid #F00;\n}\t\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;form method=\"post\" class=\"my_form_class\" id=\"my_form\" action=\"&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;\" &gt;\n\n&lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;\n&lt;input type=\"text\" name=\"first_name\" id=\"first_name\"&gt;\n\n&lt;br&gt;\n&lt;label for=\"last_name\"&gt;Last Name&lt;\/label&gt;\n&lt;input type=\"text\" name=\"last_name\" id=\"last_name\"&gt;\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_validate_textbox\" id=\"sbt_validate_textbox\" value=\"Validate Textboxes and Submit Form\"&gt;\n\n&lt;\/form&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h3>Example 1: \u00a0Most simplest way for textbox\u00a0validation\u00a0using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function(){\n\n\t\/\/When form is submitted, check to see if any of the input textboxes is empty. If yes, show an alert for each of them.\n\t$('#my_form').on(\"submit\", function(e){\n\n\t\t\/\/Collect value of first_name in a dedicated variable for our checks\t\t\n\t\tvar val_first_name = $(\"#first_name\").val();\n\t\t\/\/Collect value of last_name in a dedicated variable for our checks\t\t\n\t\tvar val_last_name = $(\"#last_name\").val();\n\n\t\t\/\/Check if first_name is empty.\n\t\tif( $.trim(val_first_name) === '' )\n\t\t{\n\t\t\t\/\/If the first_name value is really found empty, then show the alert\n\t\t\talert('First Name is Empty!');\t\t\n\n\t\t\t\/\/Prevent default form submission. If not used, form will be submitted without validation\n\t\t\te.preventDefault();\n\t\t}\n\n\t\t\/\/Check if last_name is empty.\t\t\n\t\tif( $.trim(val_last_name) === '' )\n\t\t{\n\t\t\t\/\/If the last_name value is really found empty, then show the alert\t\t\t\n\t\t\talert('Last Name is Empty!');\t\t\n\n\t\t\t\/\/Prevent default form submission. If not used, form will be submitted without validation\t\t\t\n\t\t\te.preventDefault();\n\t\t}\t\t\n\n\t});\t\t\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>As you can see from the above code, it is heavily commented. Make sure you read them to understand how each step works.<\/p>\n<h3>Example 2: \u00a0Most simplest way for textbox validation using jQuery with error highlighting<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function(){\n\n\t$('#my_form').on(\"submit\", function(e){\n\n\t\tvar val_first_name = $(\"#first_name\").val();\n\t\tvar val_last_name = $(\"#last_name\").val();\n\n\t\t\/\/If any error class already exists, remove it before processing the checks. This is done to make sure that if the input textboxes does not have any error, it will not be highlighted any more.\n\t\t$(\"#first_name\").removeClass('error');\t\n\t\t$(\"#last_name\").removeClass('error');\t\n\n\t\tif( $.trim(val_first_name) === '' )\n\t\t{\n\t\t\t\/\/If error is found, alert it first\n\t\t\talert('First Name is Empty!');\t\t\n\n\t\t\t\/\/When this field is found to have an error in it, add \"error\" class to it so that it is highlighted in red color for visibilty sakes\n\t\t\t$(\"#first_name\").addClass('error');\n\n\t\t\t\/\/Automatically focus this field because it has an error in it.\n\t\t\t$(\"#first_name\").focus();\n\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif( $.trim(val_last_name) === '' )\n\t\t{\n\t\t\t\/\/If error is found, alert it first\t\t\t\n\t\t\talert('Last Name is Empty!');\t\n\n\t\t\t\/\/When this field is found to have an error in it, add \"error\" class to it so that it is highlighted in red color for visibilty sakes\n\t\t\t$(\"#last_name\").addClass('error');\n\n\t\t\t\/\/Automatically focus this field because it has an error in it.\n\t\t\t$(\"#last_name\").focus();\t\n\n\t\t\te.preventDefault();\n\t\t}\t\t\n\n\t});\t\t\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>All of the new code is heavily commented. So feel free to read it &amp; If you have any questions, just post them in your comments below.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3074\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h4>That&#8217;s it!<\/h4>\n<p>What do you think of these ways to use\u00a0<em><strong>jQuery to validate textbox<\/strong><\/em>? Did they help you understand how validation works? Do you have any questions\/suggestions? Feel free to state them by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever wondered how to validate textbox in jQuery? If yes, here is an article that will serve as a very simple guide. In this article, I am going to share very easy way to validate a single textbox or multiple textboxes when a form is submitted. Additionally, you will be able to add colors to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-3074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-NA","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3074"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3074\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}