Allow only roman characters in text fields

Question

I am finding a way to make all the text boxes in the website only accept roman characters. Is there any easy way to do it globally.

Thanks in advance.

Answer 1

In modern browsers <input> accepts an attribute called pattern. This allows to restrict the valid characters in a given field.

input:invalid {
  background-color:red;
}

<form>
  <input type="text" pattern="[a-zA-Z\s\.\-_]+" />
  <button type="submit">Submit</button>
</form>

For all other browsers you can find all form field via jQuery, check if a pattern-attribute exists, and check it against the value of a given field. You may also replace disallowed characters:

$('form').on('keyup blur','input',function() {
  if ($(this).val() && $(this).attr('pattern')) {
    //var pattern = new RegExp('^'+$(this).attr('pattern')+'$', 'g');
    //$(this).toggleClass('invalid', pattern.match(!$(this).val()));
    var pattern = new RegExp($(this).attr('pattern').replace(/\[/,'[^'), 'g');
    $(this).val($(this).val().replace(pattern,''));
  }
});

input:invalid {
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
  <input type="text" pattern="[a-zA-Z\s\.\-_]+" />
  <button type="submit">Submit</button>
</form>

Oh, you still want to validate form inputs on the server-side. All HTML- or Javascript-stuff does not prevent all visitors of your site to submit broken stuff.

Answer 2

I will refer to the marked answer for the following question for the regex which filters out non-roman characters:

How to detect non-roman characters in JS?

Spoiler: the regex is /[^\u0000-\u024F\u1E00-\u1EFF\u2C60-\u2C7F\uA720-\uA7FF]/g

Now all you need is a little bit of tinkering with jQuery:

var myInputId = "#foo"; // Or whatever you wish to use.
var input = $(myInputId);
var exp = /[^\u0000-\u024F\u1E00-\u1EFF\u2C60-\u2C7F\uA720-\uA7FF]/g;
input.blur(function() {
    input.value = input.value.replace(exp, "");
});

Answer 3

Include this snippet into your master page for example:

<script>
    $(function(){
        $('input[type=text],textarea').keypress(function(e){
            var char = String.fromCharCode(e.which || e.charCode); 
            var rgx = /[\u0000-\u007F]/;
            if (rgx.test(char) == false)
                return false;
          })
    })
</script>

Answer 4

Here is my idea based on @fboes answer. I also needed to show user whats wrong, so there is error message showing but with no redundancy when typing couple of forbidden characters in a row.

  //I wanted first to assign pattern attr to every input in form but when it's happening, all "\" chars are removed from regex therefore - it doesn't work, so I had to add it in templates for every input.

let isIncorrect = false;

scope.checkPattern = function(e) {

    // I don't want to allow Chineese, cyrylic chars but some other special - yes
    var pattern = new RegExp('[a-zA-Z\s\.\-_äÄöÖüÜßąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+', "g");
    if ($(e).is(':valid')){
        return true
    } else {
        $(e).val($(e).val().replace(pattern,''));
        return false
    }
};

scope.removeAlert = function (e){
    $(e).parent().find('.text-danger').remove();
    isIncorrect = false;
}

// unallowed characters in order inputs
$('.my-form').on('keyup blur','input',function(e) {

    if (!scope.checkPattern($(this))) {
        if (!isIncorrect){
            // show this error message but only once (!) and for specified period of time
            $(this).parent().append('<p class="text-danger">Only latin characters allowed</p>');
            isIncorrect = true;
        }

        setTimeout(scope.removeAlert, 3000, $(this));
    }
});