<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>javascript form validation Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/javascript-form-validation/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/javascript-form-validation/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Wed, 10 Mar 2021 12:26:49 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>Registration Form Validation              Using Javascript</title>
		<link>https://www.scmgalaxy.com/tutorials/registration-form-validation-using-javascript/</link>
					<comments>https://www.scmgalaxy.com/tutorials/registration-form-validation-using-javascript/#comments</comments>
		
		<dc:creator><![CDATA[abhishek k]]></dc:creator>
		<pubDate>Wed, 10 Mar 2021 12:26:49 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Websites]]></category>
		<category><![CDATA[form validation]]></category>
		<category><![CDATA[form validation in javascript]]></category>
		<category><![CDATA[form validation using javascript]]></category>
		<category><![CDATA[javascript form validation]]></category>
		<category><![CDATA[javascript registration form]]></category>
		<category><![CDATA[registration form validation using javascript]]></category>
		<category><![CDATA[registrationin javascript]]></category>
		<guid isPermaLink="false">http://www.scmgalaxy.com/tutorials/?p=5473</guid>

					<description><![CDATA[<p>There are two methods for validating a form Using a keyword &#8220;validate&#8221; inside the input tag (&#60;input type=&#8221;text&#8221; name=&#8221;userid&#8221; placeholder= &#8220;User-Id&#8221; size=&#8221;20&#8243; required />). This Will present [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/registration-form-validation-using-javascript/">Registration Form Validation              Using Javascript</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">There are two methods for validating a form</p>



<ol class="wp-block-list"><li>Using a keyword <strong>&#8220;validate&#8221;</strong> inside the <em>input </em>tag<code> </code>(<em>&lt;input type=&#8221;text&#8221; name=&#8221;userid&#8221; placeholder= &#8220;User-Id&#8221; size=&#8221;20&#8243; required /></em>). </li></ol>



<p class="wp-block-paragraph">This Will present output as:- </p>



<figure class="wp-block-image size-large is-resized is-style-default"><img fetchpriority="high" decoding="async" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-25-edited.png" alt="" class="wp-image-5475" width="512" height="288" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-25-edited.png 853w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-25-edited-300x169.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-25-edited-768x432.png 768w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption>This will present error output as &#8220;<strong>! Please fill out the field</strong>&#8221;                      </figcaption></figure>



<p class="wp-block-paragraph">Complete code for the above form is shared below :-</p>



<script src="https://gist.github.com/abhi040498/e971236a7969fec2f2013590fb6d627e.js"></script>



<p class="wp-block-paragraph">Presented output for the above operation :-</p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" width="1024" height="795" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation1-1024x795.png" alt="" class="wp-image-5476" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation1-1024x795.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation1-300x233.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation1-768x596.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation1-1536x1193.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation1.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">2. Using function call we need to define a function that will validate the field data and return corresponding errors. </p>



<p class="wp-block-paragraph">We need to write the html code for input field in the form  </p>



<p class="wp-block-paragraph"><em>&lt;form>&lt;label>&lt;b> User-Id&lt;/b>  &lt;/label>   &lt;input type=&#8221;text&#8221; name=&#8221;userid&#8221; placeholder= &#8220;User-Id&#8221; size=&#8221;20&#8243; id=&#8221;userId&#8221; /> &lt;p id=&#8221;error1&#8243;>&lt;/p>&lt;/form></em></p>



<p class="wp-block-paragraph">First we need to call the function on submit of form as (<em>&lt;form name=&#8221;myForm&#8221;  onsubmit=&#8221;return validateForm()&#8221; methord=&#8221;post&#8221;></em>) Then we need to  define the function </p>



<script src="https://gist.github.com/abhi040498/0f489740b802d011496beb80ae7d6bff.js"></script>



<p class="wp-block-paragraph">This would produce output as </p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" width="853" height="480" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-26-edited.png" alt="" class="wp-image-5481" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-26-edited.png 853w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-26-edited-300x169.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/image-26-edited-768x432.png 768w" sizes="(max-width: 853px) 100vw, 853px" /></figure>



<p class="wp-block-paragraph">Complete code for the above function is shared below :-</p>



<script src="https://gist.github.com/abhi040498/705d49529362749e9c65daa5d172c8bf.js"></script>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" decoding="async" width="1024" height="926" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation2-1024x926.png" alt="" class="wp-image-5482" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation2-1024x926.png 1024w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation2-300x271.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation2-768x695.png 768w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation2-1536x1390.png 1536w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/03/form-validation2.png 1920w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph"><strong>Conclusion</strong>:- Validating a form in javascript is easy and is done with the function call and displays an error with respect to the type of input in the field.</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/registration-form-validation-using-javascript/">Registration Form Validation              Using Javascript</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/registration-form-validation-using-javascript/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
	</channel>
</rss>
