In this article, we will see how to restrict special characters using jquery regex. Here, we will learn how to create regex validation for a special character that is not allowed in the input textbox.
Using regular expression you can restrict the special character in the input fields. If you want to not be allowed special characters in input fields then you can use regex for validation.
So, let's see special characters not allowed using jquery regex and jquery validation for special characters not allowed.
In this example, we will check regex validation on keyup event.
$(function () {
$("form :input[type='text']").on("keyup", function (e) {
var inputTextId = $('#' + this.id);
var inputText = inputTextId.val();
var errorFor = this.id;
if (!isValidChar(inputText)) {
$('#' + this.id).val('').valid();
setTimeout(function () { replaceErrorMsg(errorFor); }, 100);
}
});
});
function isValidChar(str) {
return !/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}
function replaceErrorMsg(errorFor) {
$("label[for='" + errorFor + "'].help-block").html("Input is Invalid.");
}
In this example, we will check validation using a special characters code.
<input type="text" id="name" >
$("#name").keypress(function(e) {
$("#error_sp_msg").remove();
var k = e.keyCode,
$return = ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
if(!$return) {
$("<span/>",{
"id" : "error_sp_msg",
"html" : "Special characters not allowed"
}).insertAfter($(this));
return false;
}
})
In this example, we will use a validation jquery CDN file. So, add the following code to your file. Check the documentation of the jquery validation plugin.
HTML:
<form id="myform">
<input type="text" name="title" />
<br/><br/>
<input type="submit" />
</form>
jQuery:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
rules: {
title: {
required: true,
alphanumeric: true
}
},
submitHandler: function(form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
</script>
Output:
You might also like:
Hello All, In this tutorial i will show you laravel 8 mobile number OTP authentication using firebase, There are many...
Mar-31-2021
In this article, we will see how to generate an RSS feed in laravel 9. Here, we will generate an RSS feed in larave...
Dec-12-2022
Hello, laravel web developers! In this article, we'll see how to compress image size in laravel 11. In laravel...
Aug-19-2024
Angular 15 is the latest iteration of one of the most popular JavaScript frameworks for building dynamic web application...
Jun-05-2023