Esküvő

Javascript Form Validation

HTML markup

Add id attribute to input fields, and onClick event to buttons to execute javascript validation.

<p>Letters Only:</p>
<input type="text" id="letters" />
<button type="button" onclick="OnlyLetter('letters')">Validate Field</button>
    
<p>Numbers Only:</p>
<input type="text" id="numbers" />
<button type="button" onclick="OnlyNumber('numbers')">Validate Field</button>

<p>Letters and Numbers only:</p>
<input type="text" id="letters-numbers" />
<button type="button" onclick="LetterAndNumber('letters-numbers')">Validate Field</button>

Javascript

OnlyLetter function gives an alert when not just letters entered in input field.
OnlyNumber function gives an alert when not just numbers entered in input field.
LettersAndNumber function gives an alert when not just numbers and letters entered in input field.

<script type="text/javascript">
function OnlyLetter(id){

	// input element's value	
	var string = document.getElementById(id).value;
	// letters only filter
	var filter = /^[a-zA-Z]+$/;	
	// apply filter to string
	if(!string.match(filter)){
		// error message
		alert("Letters only!");
	}
}

function OnlyNumber(id){

	// input element's value
	var string = document.getElementById(id).value;	
	// numbers only filter
	var filter = /^[0-9]+$/;
	// apply filter to string
	if(!string.match(filter)){
		// error message
		alert("Numbers only!");
	}
}

function LetterAndNumber(id){

	// input element's value
	var string = document.getElementById(id).value;	
	// numbers only filter
	var filter = /^[a-zA-Z0-9]+$/;
	// apply filter to string
	if(!string.match(filter)){
		// error message
		alert("Letters and Numbers only!");
	}
}
</script>

 

Demo »


Esküvő


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the lion *


Find us on Facebook

Tags

Esküvő

Back to Top