Input validations using 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.