How To Restrict Special Characters Using jQuery Regex

Websolutionstuff | Dec-26-2022 | Categories : Laravel PHP jQuery

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.

Example:

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.");
}

 

Example 2:

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;
      }
      
})

 

Example 3:

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:

how_to_restrict_special_characters_using_jquery_regex_output

 


You might also like:

Recommended Post
Featured Post
How to Upgrade from Angular 16 to Angular 17
How to Upgrade from Angular 16...

Hey everyone! If you're a developer working with Angular, you know how exciting it is when a new version is released...

Read More

Mar-18-2024

Scaling for Success: Comparing cPanel Hosting with Easy Scalability
Scaling for Success: Comparing...

In today's digital landscape, your website serves as your storefront, your testimonial, and your voice. As your busi...

Read More

Jun-28-2024

Angular 15: Unleashing Modern Web Development
Angular 15: Unleashing Modern...

Angular 15 is the latest iteration of one of the most popular JavaScript frameworks for building dynamic web application...

Read More

Jun-05-2023

How To Disable Weekends In jQuery Datepicker
How To Disable Weekends In jQu...

In this tutorial, we will see how to disable weekend dates in jquery datepicker. In the date picker, the weeke...

Read More

Jun-27-2022