Using Regex to limit special characters in a textbox using jquery in ASP.net MVC form

Question

I'm trying to limit to 3 the number of special characters in a text box using JQuery. The special characters can be in any order and can be adjacent to each other or scattered over the length of the text box. I spent the last 24 hours reading almost all relevant posts in stackoverflow and trying the suggestions.

I still haven't come with a suitable regex.

Here is what I have so far at the bottom of my ASP.net mvc form:

<script type="text/javascript">
    $(document).ready(function () {
        $('input[id$=textbox1]').bind('blur', function () {
            var match = /^[.,:;!?€¥£¢$-~#%&*()_]{4,50}$/g.test(this.value);
            if (match == true)
                alert("Please enter a maximum of 3 special characters.");
        });
    });
</script>

Below is the list of special characters I'm targeting:

~`!@#%^&*()-_:;?€¥£¢$-~{}[]<>/+|=

Thanks Smamatti for the formatting. – Yosief Kesete Nov 28 '12 at 10:27 — Yosief Kesete, Nov 28 '12 at 10:27

score 1 · Accepted Answer · answered Nov 28 '12 at 10:42

You where thinking to difficullty. Just count how often the elements are inside the input and throw a warning when the count is over three.

here is an

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery-1.8.3.min.js"></script>

        <script>
            var limitchars = '[~`!@#%\^&\*\(\)-_:;\?€¥£¢\${}\[]<>/+\|=]'


            $(function () {
                var  teststring = "~`!@#%\^&\*\(\)-_:;\?€¥£¢\${}\[]<>/+\|='-:;";
                var regex = /[~`'!@#%\^&\*\(\)-_:;\?€¥£¢\${}\[\]<>/+\|=]/g

                //var test1 = teststring.match(regex);
                //debugger;
                //alert(teststring.length === test1.length);

                $('input').keyup(function () {
                    var text = this.value;

                    var match = text.match(regex);
                    if (match.length > 3) {
                        alert('invalidI input');
                    }
                });
            });
        </script>
    </head>
    <body>
        <input type="text" />
    </body>
</html>

Don't forget to escape the regular expression (http://www.regular-expressions.info/reference.html ). The g at the end of the regex counts the number of occurrence in string (http://stackoverflow.com/questions/4009756/how-to-count-string-occurrence-in-string )

score 0 · Answer 2 · answered Nov 28 '12 at 10:42

You can find the number of bad characters by counting the number of matches.

Working example at http://jsbin.com/alidus/1/

 $(document).ready(function () {
        $('#test').bind('blur', function () {       

          var charactersToExlude = "~`!@#%^&*()-_:;?€¥£¢$-~{}[]<>/+|=";
          var badCharacterRegex = "[" + charactersToExlude.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") + "]";
          console.log(badCharacterRegex);
          var patt=new RegExp(badCharacterRegex, "g");

          var matches = this.value.match(patt);

          var numberOfBadCharacters = matches ? matches.length : 0;

          if (numberOfBadCharacters >= 3) {
            $("#result").text("Please enter a maximum of 3 special characters. (" + numberOfBadCharacters + " bad characters).");
          } else {
            $("#result").text(numberOfBadCharacters + " bad characters.");
          }

        });
    });

First we escape any bad characters that have meaning to regex. Then crete the pattern, match it, if any matches, count the number of matches.

score 0 · Answer 3 · edited Jan 22 '13 at 10:20

$(document).ready(function () {
    $('#test').bind('blur', function () {       

          var charactersToExlude = "~`!@#%^&*()-_:;?€¥£¢$-~{}[]<>/+|=";
          var badCharacterRegex = "[" + charactersToExlude.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&") + "]";
          console.log(badCharacterRegex);
          var patt=new RegExp(badCharacterRegex, "g");

          var matches = this.value.match(patt);

          var numberOfBadCharacters = matches ? matches.length : 0;

          if (numberOfBadCharacters >= 3) {
            $("#result").text("Please enter a maximum of 3 special characters. (" + numberOfBadCharacters + " bad characters).");
          } else {
            $("#result").text(numberOfBadCharacters + " bad characters.");
          }

    });
});

Using Regex to limit special characters in a textbox using jquery in ASP.net MVC form

3 Answers3