{"id":179,"date":"2015-05-21T11:58:34","date_gmt":"2015-05-21T06:28:34","guid":{"rendered":"http:\/\/127.0.0.1\/Admec_Site\/?p=179"},"modified":"2025-04-03T18:43:59","modified_gmt":"2025-04-03T13:13:59","slug":"easy-tutorial-html-form-validation-using-javascript","status":"publish","type":"post","link":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/","title":{"rendered":"An Easy Tutorial on HTML Form Validation Using JavaScript"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>Hi, I am Abhishek Ranjan a web designer working in a company in Delhi and&nbsp;studying <strong><a href=\"https:\/\/www.admecindia.co.in\/course\/best-responsive-web-ui-development-master-course\/\">UI development and responsive website designing<\/a><\/strong>&nbsp;in this institute to excel my knowledge of JavaScript, jQuery, and Bootstrap to the advanced level.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?resize=1024%2C569&#038;ssl=1\" alt=\"\" class=\"wp-image-13444\" srcset=\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?resize=1024%2C569&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?resize=768%2C427&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?resize=1536%2C854&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?resize=900%2C500&amp;ssl=1 900w, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?w=2000&amp;ssl=1 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">An Easy Tutorial on HTML Form Validation Using JavaScript<\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-form-validation\"><strong>What is Form Validation?<\/strong><\/h2>\n\n\n\n<p>Form validation is the process of checking that a form has been filled in correctly before it is processed, this is called&nbsp;<strong>form validation<em>.<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-you-need-to-know-before-from-validation\"><strong>What You Need to Know before From Validation?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML<\/strong><\/li>\n\n\n\n<li><strong>CSS<\/strong><\/li>\n\n\n\n<li><strong>JavaScript<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>Note:-&nbsp;<\/strong>If you don&#8217;t have knowledge of HTML, CSS &amp; JavaScript than you may face some difficulties in validating a HTML form yet I will make all the step very easy to understand by you.<\/p>\n\n\n\n<p>Let\u2019s start form validation in JavaScript<\/p>\n\n\n\n<p>There are main two methods of validating form:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Server side method<\/li>\n\n\n\n<li>Client side method<\/li>\n<\/ul>\n\n\n\n<p><strong>Server-side<\/strong>: This validation is more secure but often more tricky to code because it takes down the performance of the website. It is compulsory to add in a web form but along with the client side validation. It is important when a hacker disables the JavaScript then server side validation protects your website.<\/p>\n\n\n\n<p><strong>Client-side<\/strong>: It is done by JavaScript. This validation is easier to do and quicker too (the browser doesn&#8217;t have to connect to the server to validate the form, so the user finds out instantly if they&#8217;ve missed out that required field!).<\/p>\n\n\n\n<p>JavaScript, provides a way to validate form&#8217;s data on the client&#8217;s computer before sending it to the web server. Form validation generally performs two functions.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Basic Validation<\/strong>&nbsp;&#8211; First of all, the form must be checked to make sure data was entered into each form field that required it. This would need just loop through each field in the form and check for data.<\/li>\n\n\n\n<li><strong>Data Format Validation<\/strong>&nbsp;&#8211; Secondly, the data that is entered must be checked for correct form and value. This would need to put more logic to test correctness of data.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lets-start-the-validation-of-an-html-form-using-javascript\"><strong>Lets start the Validation of an HTML Form using JavaScript<\/strong><\/h2>\n\n\n\n<p>Let&#8217;s build a simple form with a validation script. The form will include more than one input box, select-box, checkbox, radio-button, drop-down-box, message-box, reset-button and a submit button. Our validation script will ensure that the users enter their proper information before the form is sent to the server.<\/p>\n\n\n\n<p>There are two procedure two validate a form using JavaScript:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Simple JavaScript<\/li>\n\n\n\n<li>Object Oriented JavaScript (OOJS)<\/li>\n<\/ol>\n\n\n\n<p>Validating an HTML form using OOJS is out of the scope of this article. We will surely write on that soon.<\/p>\n\n\n\n<p><strong><em>Example:<\/em><\/strong><\/p>\n\n\n\n<p>HTML form:<\/p>\n\n\n\n<p>First we need to create a form using HTML and CSS (only for presentation purposes). If you are not good in HTML, I would recommend you our&nbsp;<a href=\"https:\/\/www.admecindia.co.in\/course\/best-html-css-master-course\/\"><strong>Advanced HTML5 and CSS3 Course<\/strong><\/a>.<\/p>\n\n\n\n<p>Below I used few attributes in first line inside &lt;form&gt; tag e.g. method, action, onsubmit=&#8221;return validation(this) in HTML first line which is necessary for Form:<\/p>\n\n\n\n<p>Ok now,<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>First telling you what is a method?<\/strong><\/p>\n\n\n\n<p>Method is the action that can be performed on objects through which a browser accomplishes some useful tasks such as validation response, security, and sends form information to the server.<\/p>\n\n\n\n<p>There are two types of methods: &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Post<\/li>\n\n\n\n<li>Get<\/li>\n<\/ul>\n\n\n\n<p><strong>Post method:&nbsp;<\/strong>Post method is used for sending information to server. All programmers use mainly post method because it is secure and can transfer unlimited information.<\/p>\n\n\n\n<p><strong>Get method:&nbsp;<\/strong>Get method is used for sending information to server too. Get method is less-secure than Post method.<\/p>\n\n\n\n<p><strong>Action:&nbsp;<\/strong>Action is an form attribute where we assign a PHP file generally and this file capture the data submitted from this form and then validate it for the further uses.<\/p>\n\n\n\n<p><strong>onsubmit:&nbsp;<\/strong>onsubmit is an event of JavaScript, it monitors for the submit action. As someone clicks on<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<form method=&quot;post&quot; action=&quot;http:\/\/www.admecindia.co.in&quot; onsubmit=&quot;return validation(this)&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0Name:<input type=&quot;text&quot; name=&quot;name&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0Phone:<input type=&quot;text&quot; name=&quot;phone&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0Email:<input type=&quot;text&quot; name=&quot;email&quot; \/&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0Gender:\n\u00a0\u00a0\u00a0\u00a0\u00a0<input type=&quot;radio&quot; value=&quot;male&quot; name=&quot;gender&quot; &gt;Male\n\u00a0\u00a0\u00a0\u00a0\u00a0<input type=&quot;radio&quot; value=&quot;female&quot; name=&quot;gender&quot; &gt;Female\n\u00a0\u00a0\u00a0\u00a0\u00a0Reference:\n\u00a0\u00a0\u00a0\u00a0\u00a0<input type=&quot;checkbox&quot; value=&quot;tv&quot; name=&quot;tv&quot; &gt;TV\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0<input type=&quot;checkbox&quot; value=&quot;radio&quot; name=&quot;radio&quot; &gt;Radio\n\u00a0\u00a0\u00a0\u00a0\u00a0Course:\n\u00a0\u00a0\u00a0\u00a0\u00a0<select name=&quot;course&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=&quot;&quot;&gt;Select Please<\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=&quot;Graphic&quot;&gt;Graphic<\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=&quot;Web&quot;&gt;Web<\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=&quot;Animation&quot;&gt;Animation<\/option&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/select&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0Comments: <textarea rows=&quot;5&quot; cols=&quot;10&quot; name=&quot;comm&quot;&gt;<\/textarea&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0<input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0<input type=&quot;reset&quot; value=&quot;Reset&quot;&gt;\n<\/form&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;form<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">method<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">post<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">action<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">http:\/\/www.admecindia.co.in<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">onsubmit<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">return validation(this)<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Name:<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">name<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Phone:<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">phone<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Email:<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">email<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Gender:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">radio<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">male<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">gender<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Male<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">radio<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">female<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">gender<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Female<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Reference:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">checkbox<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">tv<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">tv<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">TV\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">checkbox<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">radio<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">radio<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Radio<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Course:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;select<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">course<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;option<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Select Please<\/span><span style=\"color: #81A1C1\">&lt;\/option&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;option<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Graphic<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Graphic<\/span><span style=\"color: #81A1C1\">&lt;\/option&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;option<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Web<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Web<\/span><span style=\"color: #81A1C1\">&lt;\/option&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;option<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Animation<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Animation<\/span><span style=\"color: #81A1C1\">&lt;\/option&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/select&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0Comments: <\/span><span style=\"color: #81A1C1\">&lt;textarea<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rows<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">5<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">cols<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">10<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">comm<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/textarea&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">submit<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Submit<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;input<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">reset<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Reset<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/form&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-write-javascript-required-to-validate-above-html-form\"><strong>Lets Write JavaScript Required to Validate above HTML Form<\/strong><\/h3>\n\n\n\n<p>I am going to create a function with the name of validation and it has a parameter in it. This parameter will be replace with \u2018this\u2019 keyword in form\u2019s \u2018onsubmit\u2019 attribute so it will point to the form. I will be collecting all the values first and then add conditions to check one by one using \u2018if\u2019 conditional so that I can show all the errors at a time. You will notice a regular expression pattern too in this form validation in JavaScript code.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<script type=&quot;text\/javascript&quot;&gt;\n\u00a0\u00a0\/\/lets create a function\n\u00a0\u00a0function validation(arg){\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ arg is used to pass value\n\n\u00a0\u00a0\u00a0\u00a0\u00a0var gName = arg.name.value;\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Get the value of name(selecter) and put in gName(variable)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0var gPhone = arg.phone.value;\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Get the value of phone(selecter) and put in gPhone(Variable)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0var gEmail = arg.email.value;\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Get the value of email(selecter) and put in gEmail(Variable)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0var gComm = arg.comm.value;\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Get the Value of comm(selecter) and put in gComm (Variable)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/lets create a Regular Expression or RegExp pattern to validate our email address value coming from a form field.\n\u00a0\u00a0\u00a0\u00a0\u00a0var ePat = \/^[a-z-._0-9]+@[a-z0-9]+\\.[a-z.]{2,5}$\/;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Find a single character, except newline or line terminator\n\u00a0\u00a0\u00a0\u00a0\u00a0var namePatDt = \/\\.\/;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Only digits find\n\u00a0\u00a0\u00a0\u00a0\u00a0var namePatDgt = \/\\d\/;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ err variable is used to show error message.\n\u00a0\u00a0\u00a0\u00a0\u00a0var err = &quot;&quot;;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ errNum variable is used to show error index\n\u00a0\u00a0\u00a0\u00a0\u00a0var errNum = 0;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (gName == &quot;&quot; || gName.length < 3 || namePatDt.test(gName) || namePatDgt.test(gName)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Invalid name.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/*\u00a0 The above code checks the value : If Value empety\u00a0 or value length less than 3 or\u00a0 value is digit than Show error Indvalid Name \u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (gPhone == &quot;&quot; || gPhone.length < 8 || isNaN(gPhone)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Invalid phone num.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/* This code check the value : If value is empty or value length less than 8 or is not a null then show error Invalid Phone num *\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (gEmail == &quot;&quot;) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Enter Email.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/* If you don't Enter anything in Email field than show error(Enter Email)\u00a0 *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0else{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!ePat.test(gEmail)){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Invalid Email.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/*\u00a0 If you don't Enter Email address in ePat format (i already discribe &quot;ePat&quot;) than shaw error (Invalid Email)\u00a0 *\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (gComm == &quot;&quot;) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Enter comments.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/* If you don't Enter anything in Comment field than show error(Enter Comments) *\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (!arg.gender[0].checked &amp;&amp; !arg.gender[1].checked) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Select gender.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/* If you don't\u00a0 checked 0 index of gender field\u00a0 or 1 index than show error(Select gender)*\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (!arg.tv.checked &amp;&amp; !arg.radio.checked) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Select Reference.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/*\u00a0 If you don't\u00a0 checked tv field and radio field than show error(Select Reference) *\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (arg.course.selectedIndex < 1) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + &quot;. Select Course.\\n&quot;;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/*\u00a0 This code check your selection index if your index is less than 1 than show error (Select course) *\/\n\n\u00a0\u00a0\u00a0\u00a0\u00a0if (errNum&gt;0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(err);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/*\u00a0 If errNum is greater than 0 than alert error and return &quot;false&quot; *\/\n\u00a0\u00a0\u00a0\u00a0\u00a0else{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('done');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return true;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\/* If errNum is less than 0 or 0 than alert &quot;done&quot; and return &quot;true&quot;*\/\n  }\n\n    main();\n<\/script&gt;\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">type<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">text\/javascript<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\/\/lets create a function<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0function validation(arg)<\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/ arg is used to pass value<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">gName<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">arg<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">name<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/Get the value of name(selecter) and put in gName(variable)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">gPhone<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">arg<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">phone<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/Get the value of phone(selecter) and put in gPhone(Variable)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">gEmail<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">arg<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">email<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/Get the value of email(selecter) and put in gEmail(Variable)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">gComm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">arg<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">comm<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/Get the Value of comm(selecter) and put in gComm (Variable)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/lets create a Regular Expression or RegExp pattern to validate our email address value coming from a form field.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">ePat<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #EBCB8B\"> <\/span><span style=\"color: #ECEFF4\">\/<\/span><span style=\"color: #81A1C1\">^<\/span><span style=\"color: #ECEFF4\">[<\/span><span style=\"color: #EBCB8B\">a-z-._0-9<\/span><span style=\"color: #ECEFF4\">]<\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #EBCB8B\">@<\/span><span style=\"color: #ECEFF4\">[<\/span><span style=\"color: #EBCB8B\">a-z0-9<\/span><span style=\"color: #ECEFF4\">]<\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #EBCB8B\">\\.<\/span><span style=\"color: #ECEFF4\">[<\/span><span style=\"color: #EBCB8B\">a-z.<\/span><span style=\"color: #ECEFF4\">]<\/span><span style=\"color: #81A1C1\">{2,5}$<\/span><span style=\"color: #ECEFF4\">\/<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/Find a single character, except newline or line terminator<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">namePatDt<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #EBCB8B\"> <\/span><span style=\"color: #ECEFF4\">\/<\/span><span style=\"color: #EBCB8B\">\\.<\/span><span style=\"color: #ECEFF4\">\/<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/Only digits find<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">namePatDgt<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #EBCB8B\"> <\/span><span style=\"color: #ECEFF4\">\/<\/span><span style=\"color: #EBCB8B\">\\d<\/span><span style=\"color: #ECEFF4\">\/<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/ err variable is used to show error message.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">err<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/\/ errNum variable is used to show error index<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">errNum<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #88C0D0\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">gName<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">==<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">gName<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">length <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">namePatDt<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">test<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">gName<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">namePatDgt<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">test<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">gName<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Invalid name.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/*\u00a0 The above code checks the value : If Value empety\u00a0 or value length less than 3 or\u00a0 value is digit than Show error Indvalid Name \u00a0*\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (gPhone == <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #88C0D0\"> || gPhone.length &lt; 8 || isNaN(gPhone)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Invalid phone num.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/* This code check the value : If value is empty or value length less than 8 or is not a null then show error Invalid Phone num *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (gEmail == <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #88C0D0\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Enter Email.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/* If you don&#39;t Enter anything in Email field than show error(Enter Email)\u00a0 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0else{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(!ePat.test(gEmail)){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Invalid Email.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/*\u00a0 If you don&#39;t Enter Email address in ePat format (i already discribe &quot;ePat&quot;) than shaw error (Invalid Email)\u00a0 *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (gComm == <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #88C0D0\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Enter comments.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/* If you don&#39;t Enter anything in Comment field than show error(Enter Comments) *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (!arg.gender[0].checked &amp;&amp; !arg.gender[1].checked) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Select gender.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/* If you don&#39;t\u00a0 checked 0 index of gender field\u00a0 or 1 index than show error(Select gender)*\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (!arg.tv.checked &amp;&amp; !arg.radio.checked) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Select Reference.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/*\u00a0 If you don&#39;t\u00a0 checked tv field and radio field than show error(Select Reference) *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (arg.course.selectedIndex &lt; 1) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errNum++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0err += errNum + <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">. Select Course.<\/span><span style=\"color: #EBCB8B\">\\n<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #88C0D0\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/*\u00a0 This code check your selection index if your index is less than 1 than show error (Select course) *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0if (errNum&gt;0) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(err);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/*\u00a0 If errNum is greater than 0 than alert error and return &quot;false&quot; *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0else{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">done<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #88C0D0\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return true;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #616E88\">\/* If errNum is less than 0 or 0 than alert &quot;done&quot; and return &quot;true&quot;*\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">    main();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p style=\"font-size:24px\"><strong>Summary<\/strong><\/p>\n\n\n\n<p>Above explanation will surely help you in understanding Form Validation in JavaScript and HTML. The Form Validation is being used almost in every website. It is very good to create a safe and performance rich website because everything can&#8217;t be left out for the server as sever sucks. If you want any help or&nbsp;<strong>advanced Form Validation training using JavaScript<\/strong>&nbsp;then you can join <a href=\"https:\/\/www.admecindia.co.in\/course\/best-javascript-master-course\/\">online or classroom JavaScript classes<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi, I am Abhishek Ranjan a web designer working in a company in Delhi and&nbsp;studying UI development and responsive website designing&nbsp;in this institute to excel my knowledge of JavaScript, jQuery, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[80],"tags":[102],"class_list":["post-179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>An Easy Tutorial on HTML Form Validation Using JavaScript - ADMEC<\/title>\n<meta name=\"description\" content=\"Forms are the most important features of a website or web app. Learn the form validation of HTML using JavaScript step by step with this easy tutorial.\" \/>\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.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Easy Tutorial on HTML Form Validation Using JavaScript - ADMEC\" \/>\n<meta property=\"og:description\" content=\"Forms are the most important features of a website or web app. Learn the form validation of HTML using JavaScript step by step with this easy tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"ADMEC Multimedia Institute\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/admecInstituteOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-21T06:28:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T13:13:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"ADMEC Multimedia Institute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@admecinstitute\" \/>\n<meta name=\"twitter:site\" content=\"@admecinstitute\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ADMEC Multimedia Institute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\"},\"author\":{\"name\":\"ADMEC Multimedia Institute\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/53466235b5c8703280e7b0ebab0c7dcb\"},\"headline\":\"An Easy Tutorial on HTML Form Validation Using JavaScript\",\"datePublished\":\"2015-05-21T06:28:34+00:00\",\"dateModified\":\"2025-04-03T13:13:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\"},\"wordCount\":825,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1\",\"keywords\":[\"JavaScript\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\",\"url\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\",\"name\":\"An Easy Tutorial on HTML Form Validation Using JavaScript - ADMEC\",\"isPartOf\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1\",\"datePublished\":\"2015-05-21T06:28:34+00:00\",\"dateModified\":\"2025-04-03T13:13:59+00:00\",\"description\":\"Forms are the most important features of a website or web app. Learn the form validation of HTML using JavaScript step by step with this easy tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1\",\"width\":2000,\"height\":1112,\"caption\":\"An Easy Tutorial on HTML Form Validation Using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.admecindia.co.in\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Easy Tutorial on HTML Form Validation Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.admecindia.co.in\/#website\",\"url\":\"https:\/\/www.admecindia.co.in\/\",\"name\":\"ADMEC Multimedia Institute\",\"description\":\"Best Graphic Design, Web Design, UX Design, Animation Institute in Delhi\",\"publisher\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.admecindia.co.in\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.admecindia.co.in\/#organization\",\"name\":\"ADMEC\",\"url\":\"https:\/\/www.admecindia.co.in\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1\",\"width\":225,\"height\":225,\"caption\":\"ADMEC\"},\"image\":{\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/admecInstituteOfficial\/\",\"https:\/\/x.com\/admecinstitute\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/53466235b5c8703280e7b0ebab0c7dcb\",\"name\":\"ADMEC Multimedia Institute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.admecindia.co.in\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85595b2b8e958b60299faadf7c199061dff85db95c35c29f25ef095f173f9f2c?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85595b2b8e958b60299faadf7c199061dff85db95c35c29f25ef095f173f9f2c?s=96&r=g\",\"caption\":\"ADMEC Multimedia Institute\"},\"sameAs\":[\"https:\/\/www.admecindia.co.in\"],\"url\":\"https:\/\/www.admecindia.co.in\/author\/admec\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"An Easy Tutorial on HTML Form Validation Using JavaScript - ADMEC","description":"Forms are the most important features of a website or web app. Learn the form validation of HTML using JavaScript step by step with this easy tutorial.","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.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"An Easy Tutorial on HTML Form Validation Using JavaScript - ADMEC","og_description":"Forms are the most important features of a website or web app. Learn the form validation of HTML using JavaScript step by step with this easy tutorial.","og_url":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/","og_site_name":"ADMEC Multimedia Institute","article_publisher":"https:\/\/www.facebook.com\/admecInstituteOfficial\/","article_published_time":"2015-05-21T06:28:34+00:00","article_modified_time":"2025-04-03T13:13:59+00:00","og_image":[{"width":2000,"height":1112,"url":"https:\/\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg","type":"image\/jpeg"}],"author":"ADMEC Multimedia Institute","twitter_card":"summary_large_image","twitter_creator":"@admecinstitute","twitter_site":"@admecinstitute","twitter_misc":{"Written by":"ADMEC Multimedia Institute","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/"},"author":{"name":"ADMEC Multimedia Institute","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/53466235b5c8703280e7b0ebab0c7dcb"},"headline":"An Easy Tutorial on HTML Form Validation Using JavaScript","datePublished":"2015-05-21T06:28:34+00:00","dateModified":"2025-04-03T13:13:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/"},"wordCount":825,"commentCount":0,"publisher":{"@id":"https:\/\/www.admecindia.co.in\/#organization"},"image":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1","keywords":["JavaScript"],"articleSection":["Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/","url":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/","name":"An Easy Tutorial on HTML Form Validation Using JavaScript - ADMEC","isPartOf":{"@id":"https:\/\/www.admecindia.co.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1","datePublished":"2015-05-21T06:28:34+00:00","dateModified":"2025-04-03T13:13:59+00:00","description":"Forms are the most important features of a website or web app. Learn the form validation of HTML using JavaScript step by step with this easy tutorial.","breadcrumb":{"@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#primaryimage","url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1","width":2000,"height":1112,"caption":"An Easy Tutorial on HTML Form Validation Using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.admecindia.co.in\/web-design\/easy-tutorial-html-form-validation-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.admecindia.co.in\/"},{"@type":"ListItem","position":2,"name":"An Easy Tutorial on HTML Form Validation Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.admecindia.co.in\/#website","url":"https:\/\/www.admecindia.co.in\/","name":"ADMEC Multimedia Institute","description":"Best Graphic Design, Web Design, UX Design, Animation Institute in Delhi","publisher":{"@id":"https:\/\/www.admecindia.co.in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.admecindia.co.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.admecindia.co.in\/#organization","name":"ADMEC","url":"https:\/\/www.admecindia.co.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/11\/admec-new-logo.jpeg?fit=225%2C225&ssl=1","width":225,"height":225,"caption":"ADMEC"},"image":{"@id":"https:\/\/www.admecindia.co.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/admecInstituteOfficial\/","https:\/\/x.com\/admecinstitute"]},{"@type":"Person","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/53466235b5c8703280e7b0ebab0c7dcb","name":"ADMEC Multimedia Institute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.admecindia.co.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85595b2b8e958b60299faadf7c199061dff85db95c35c29f25ef095f173f9f2c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85595b2b8e958b60299faadf7c199061dff85db95c35c29f25ef095f173f9f2c?s=96&r=g","caption":"ADMEC Multimedia Institute"},"sameAs":["https:\/\/www.admecindia.co.in"],"url":"https:\/\/www.admecindia.co.in\/author\/admec\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2015\/05\/admec-internal-an-easy-tutorial-on-html-form-validation-using-javascript.jpg?fit=2000%2C1112&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":239,"url":"https:\/\/www.admecindia.co.in\/web-design\/javascript-tutorial-very-beginners\/","url_meta":{"origin":179,"position":0},"title":"JavaScript Tutorial for Every Beginners","author":"ADMEC Multimedia Institute","date":"April 26, 2016","format":false,"excerpt":"JavaScript is a client side scripting language, when we linked JavaScript with HTML then it makes our web pages interactive. It's called client side scripting language because it's run at the client side in a browser. JavaScript Tutorial for Every Beginners We cannot create dynamic web pages without JavaScript. It\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/04\/admec-internal-JavaScript-Tutorial-for-Every-Beginners.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/04\/admec-internal-JavaScript-Tutorial-for-Every-Beginners.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/04\/admec-internal-JavaScript-Tutorial-for-Every-Beginners.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/04\/admec-internal-JavaScript-Tutorial-for-Every-Beginners.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/04\/admec-internal-JavaScript-Tutorial-for-Every-Beginners.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":83963,"url":"https:\/\/www.admecindia.co.in\/web-design\/uses-of-javascript-and-its-popular-features-like-es6\/","url_meta":{"origin":179,"position":1},"title":"Uses of JavaScript and its popular features like ES6","author":"ADMEC Multimedia Institute","date":"December 5, 2024","format":false,"excerpt":"JavaScript is a very popular language for web development. It was introduced by Brendan Eich in 1995, the first name of JavaScript was Mocha then it was called LiveScript. Firstly, I learned HTML and CSS then moved to JavaScript in my web design and development course at ADMEC. It is\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/12\/image-1.png?fit=1024%2C768&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/12\/image-1.png?fit=1024%2C768&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/12\/image-1.png?fit=1024%2C768&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2024\/12\/image-1.png?fit=1024%2C768&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":36583,"url":"https:\/\/www.admecindia.co.in\/miscellaneous\/what-is-ajax-and-why-to-use-it-with-php\/","url_meta":{"origin":179,"position":2},"title":"What is Ajax and why to use it with PHP?","author":"ADMEC Multimedia Institute","date":"August 14, 2021","format":false,"excerpt":"AJAX or Ajax which stands for Asynchronous JavaScript and XML. It is a web development technique that helps to create a highly responsive, fast, and dynamic user experience in web pages. In this blog, we will look at the ways to use Ajax with PHP. Let\u2019s first understand about Ajax\u2026","rel":"","context":"In &quot;Miscellaneous&quot;","block_context":{"text":"Miscellaneous","link":"https:\/\/www.admecindia.co.in\/category\/miscellaneous\/"},"img":{"alt_text":"How to use Ajax with PHP?","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/08\/admec-internal-ajax-with-php.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/08\/admec-internal-ajax-with-php.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/08\/admec-internal-ajax-with-php.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/08\/admec-internal-ajax-with-php.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2021\/08\/admec-internal-ajax-with-php.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":576,"url":"https:\/\/www.admecindia.co.in\/web-design\/learn-javascript-basics-5-minutes\/","url_meta":{"origin":179,"position":3},"title":"Learn JavaScript Basics in 5 Minutes","author":"ADMEC Multimedia Institute","date":"July 12, 2019","format":false,"excerpt":"Web Development has been taken away like a storm with arise of JavaScript. Almost all the websites that exist consume the power of this scripting language in some way or the other. JavaScript is everywhere, be it websites or native applications. It is one of the renowned languages in the\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/07\/admec-interior-js-basics_0-1.jpg?fit=1200%2C668&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/07\/admec-interior-js-basics_0-1.jpg?fit=1200%2C668&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/07\/admec-interior-js-basics_0-1.jpg?fit=1200%2C668&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/07\/admec-interior-js-basics_0-1.jpg?fit=1200%2C668&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2019\/07\/admec-interior-js-basics_0-1.jpg?fit=1200%2C668&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":121,"url":"https:\/\/www.admecindia.co.in\/web-design\/tutorial-common-css-methods-jquery\/","url_meta":{"origin":179,"position":4},"title":"A Tutorial on Common CSS Methods of jQuery","author":"ADMEC Multimedia Institute","date":"October 19, 2014","format":false,"excerpt":"jQuery is such an easy and wonderful library to use in web pages to add interactivity and animations. Its CSS APIs are one of the most important APIs of jQuery. Animation and design related tasks are created by these only in jQuery. A Tutorial on Common CSS Methods of jQuery\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/10\/admec-internal-common-css-methods-of-jquery.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/10\/admec-internal-common-css-methods-of-jquery.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/10\/admec-internal-common-css-methods-of-jquery.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/10\/admec-internal-common-css-methods-of-jquery.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2014\/10\/admec-internal-common-css-methods-of-jquery.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":241,"url":"https:\/\/www.admecindia.co.in\/web-design\/javascript-and-dom-concept\/","url_meta":{"origin":179,"position":5},"title":"JavaScript and DOM Concept","author":"ADMEC Multimedia Institute","date":"May 11, 2016","format":false,"excerpt":"JavaScript and DOM Concept The main purpose of writing this blog to give an introduction about DOM, how can we manipulate HTML and how the interaction with HTML happens using JavaScript. What is DOM ? DOM(Document Object Model) is a programming interface for HTML documents. When a browser loads a\u2026","rel":"","context":"In &quot;Web Design&quot;","block_context":{"text":"Web Design","link":"https:\/\/www.admecindia.co.in\/category\/web-design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/05\/admec-internal-JavaScript-and-DOM-Concept.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/05\/admec-internal-JavaScript-and-DOM-Concept.jpg?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/05\/admec-internal-JavaScript-and-DOM-Concept.jpg?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/05\/admec-internal-JavaScript-and-DOM-Concept.jpg?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.admecindia.co.in\/wp-content\/uploads\/2016\/05\/admec-internal-JavaScript-and-DOM-Concept.jpg?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts\/179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":0,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/posts\/179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/media\/13444"}],"wp:attachment":[{"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/categories?post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.admecindia.co.in\/wp-json\/wp\/v2\/tags?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}