All types of form validation using javascipt

Here you will get the form validation using javascript.We will try to cover all the validations.

You need to only change the keycodes of keyboards to validate as per your requirement. There are few examples where i have done validations for Numeric values, Special Characters etc.

To change input text value to uppercase or lowercase.

<input type="text" onkeyup="this.value = this.value.toUpperCase();"	

Please change the function name for every validation in Html or Jsp body section : Example <input type=”text” onkeypress=”return validationFunctionName(event)”>

To Allow only alphabet ,numeric and space values.

<script>
function AlphaNumSpace(event){
    if(!((event.keyCode >= 65) && (event.keyCode <= 90) || (event.keyCode >= 97) && (event.keyCode <= 122) || (event.keyCode >= 48) && (event.keyCode <= 57)|| (event.keyCode == 32))){
              event.returnValue = false;
              return;
           }
           event.returnValue = true;
        }	
		</script>

Name Validation for any registration form

function NameValidation(event){
    var firstChar =$('#' + event.target.id).val();
  if(event.keyCode == 32 && firstChar == ""){
       return false;
      }
    if(!((event.keyCode >= 65) && (event.keyCode <= 90) || (event.keyCode >= 97) && (event.keyCode <= 122) || (event.keyCode == 32))){
              event.returnValue = false;
              return;
           }
           event.returnValue = true;
        }

To block number and special character .

function blockNumberSpecialChar(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

To block any special character

function blockSpecialChar(event){
    if(!((event.keyCode >= 65) && (event.keyCode <= 90) || (event.keyCode >= 97) && (event.keyCode <= 122) || (event.keyCode >= 48) && (event.keyCode <= 57))){
              event.returnValue = false;
              return;
           }
           event.returnValue = true;
        }

Number validation

function numericValidationTruck(evt) {
	evt = (evt) ? evt : window.event;
	var charCode = (evt.which) ? evt.which : evt.keyCode;
	if (charCode > 31 && (charCode < 48 || charCode > 57)) {
		return false;
	}
	return true;
}

Clear or Empty all the field values.

function formClear() {
$('#fieldIdName').val('');
}

Validate Input fields

function doValidation() {

	var firstName = $('#firstName').val();
	if (firstName.length == 0 || firstName=="" ) {
		alert("Enter First Name")
		return false;
	}
	var contactNumber = $('#contactNumber').val();
	if (contactNumber.length == 0 || contactNumber=="" ) {
		if(contactNumber>0 && contactNumber<10)
		{
		alert("Contact number is incorrect")
		return false;
	}
	}
}

I hope this helps you.If you want any other form validations comment below, feel free to ask if you have any doubts regarding this.

Thanks

About the author

Ravi Kumar

View all posts
0 0 vote
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] a JavaScript open-source framework. React, Vue  – are library, when used in conjunction with other tools, […]