Input validations using javascript | Code2night.com
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Input validations using javascript

Date- Aug 14,2022

2981

Free Download
Alphanumeric validation javascript Numbers validation javascript

So, the first one that we will check is how to add decimal validation in js.

You can add input box and then apply the javascript function to validate input, as you can see below

Copy Only Number And Decimal HTML

  <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Only Number And Decimal</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputNumberWithDecimal" placeholder="Enter Only Number And Decimal" value="" name="inputNumberWithDecimal" onkeypress="return onlyNumberWithDecimal(event)" />
        </div>
    </div>

Now we have to add this script to validate on keypress .

    function onlyNumberWithDecimal(evt) {
        try {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
                && (charCode < 48 || charCode > 57))
                return false;

            return true;
        }
        catch (err) {
            alert(err.Description);
        }
    }

So, the second one that we will check is how to add numeric only validation in js. Copy the html from here.

    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Amount</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Amount" value="" name="inputNumber" onkeypress="return isNumber(event)" />
        </div>
    </div>

Now we have to add this script to validate numeric only characters on keypress 

    function isNumber(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;
    }

So, the third one that we will check is how to add alphanumeric validation in js. Copy the html from here.

    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Only Alphanumeric</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputAlphanumeric" placeholder="Enter Only Alphanumeric" value="" name="inputAlphanumeric" onkeypress="return onlyAlphanumerics(event)" />
        </div>
    </div>

Now we have to add this script to validate alphanumeric characters on keypress .

    function onlyAlphanumerics(e) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        e.preventDefault();
        return false;
    }

So, the last one that we will check is how to add alphabets only validation in js. Copy the html from here.

    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Only Alphabets</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputAlphabet" placeholder="Enter Only Alphabets" value="" name="inputAlphabet" onkeypress="return onlyAlphabets(event)" />
        </div>
    </div>

Now we have to add this script to validate alphabets  on keypress .

    function onlyAlphabets(evt) {
        try {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                return true;
            else
                return false;
        }
        catch (err) {
            alert(err.Description);
        }
    }

You can get the Complete Code from here and run the application

<form>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Only Number And Decimal</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputNumberWithDecimal" placeholder="Enter Only Number And Decimal" value="" name="inputNumberWithDecimal" onkeypress="return onlyNumberWithDecimal(event)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Amount</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Amount" value="" name="inputNumber" onkeypress="return isNumber(event)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Only Alphanumeric</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputAlphanumeric" placeholder="Enter Only Alphanumeric" value="" name="inputAlphanumeric" onkeypress="return onlyAlphanumerics(event)" />
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Enter Only Alphabets</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputAlphabet" placeholder="Enter Only Alphabets" value="" name="inputAlphabet" onkeypress="return onlyAlphabets(event)" />
        </div>
    </div>
</form>
<script>
    //Number And Decimal
    function onlyNumberWithDecimal(evt) {
        try {
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode != 46 && charCode > 31
                && (charCode < 48 || charCode > 57))
                return false;

            return true;
        }
        catch (err) {
            alert(err.Description);
        }
    }

    //numeric only
    function isNumber(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;
    }
    //alphanumeric only
    function onlyAlphanumerics(e) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        e.preventDefault();
        return false;
    }

    //alphabet only
    function onlyAlphabets(evt) {
        try {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                return true;
            else
                return false;
        }
        catch (err) {
            alert(err.Description);
        }
    }

</script>

So, this is how we can add different input validations using javascript.

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1230
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts