English only characters

Question

I have a input type URL and client want to only accept ENGLISH characters on input

Keypress and Blur function is what I have but in blur it still accept this likr inout "建築家test.com"

<input type="url" id="url" required pattern="https?://.+" placeholder="http://example.com">

    $("#url").on("keypress", function(event) {

    var englishAlphabetDigitsAndWhiteSpace = /[a-zA-Z0-9!@#$%^*_|:/.]/g;

    var key = String.fromCharCode(event.which);

    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetDigitsAndWhiteSpace.test(key)) {
        return true;
    }

    return false;
   });

$("#url").blur(function(e){
    var input = $(this).val();
    var regex = /[a-zA-Z0-9!@#$%^*_|:/.]/g; 
    if(regex.test(input)) {
      alert("OK");
    }
    else {
        alert("no Japanese allowed");
        return false;  
    }
});

Answer 1

Could you try with the following regex:

^([a-zA-Z0-9!@#$%^*_|:/.])*$

or that one, depending on if you accept empty string or not as valid entry.

^([a-zA-Z0-9!@#$%^*_|:/.])+$

Last but not least, if you want to check that your input is a well-formed UR, have a look at the following link:

What is the best regular expression to check if a string is a valid URL?