Как предотвратить ввод недопустимых символов в форму?

Question

Например, если у меня есть форма, и я не хочу, чтобы пользователь вводил в нее числа, и я проверяю ее с помощью функции, содержащей регулярное выражение, как предотвратить ввод недопустимого символа, введенного пользователем (в этом примере, цифра) от отображения в текстовой форме, если он не прошел проверку регулярного выражения?

Это функция, которую я пробовал, и список выбора, который я попробовал (другими словами, это не вся программа). Я попытался вернуть false в обработчик события onkeypress, но то, что пользователь входит в текстовое поле, все еще проходит.

function noNumbers(answer) { //returns false and displays an alert if the answer contains numbers 
    if (/[\d]+/.test(answer)) { // if there are numbers 
     window.alert("You can not enter numbers in this field"); 
     return false; 
    } 

} 

<form action="get" enctype="application/x-www-form-urlencoded"> 
    <select id="questions" name="questions"> 
     <option value="no_numbers">What is the name of the city where you were born?</option> 
     <option value="no_letters">What is your phone number?</option> 
     <option value="no_numbers">What is the name of your favorite pet?</option> 
     <option value="no_letters">What is your social security number?</option> 
     <option value="no_numbers">What is your mother's maiden name?</option> 
    </select> 
    <p><input type="text" name="answer" onkeypress="validateAnswer();" /></p> 
</form> 

Answer 1

Это функция, которую вы ищете

function validateAnswer(src) { 
    var questions = document.getElementById("questions"); 
    var rule = questions.options[questions.selectedIndex].value; 
    if(rule=="no_numbers") src.value = src.value.replace(/\d/g, ''); 
    if(rule=="no_letters") src.value = src.value.replace(/\w/g, ''); 
} 

просто отправить ссылку на поле ввода функции и установите его в onkeyup случае вместо:

<input type="text" name="answer" onkeyup="validateAnswer(this);" /> 

вы должны также подключить onchange событие для выбора значения поля ввода. Я предлагаю вам также рассмотреть HTML5 pattern attribute. См

• the fiddle
• patern attribute support
• workaround for unsupported browsers

Answer 2

Сделайте свою жизнь проще, добавив дополнительный параметр к вашей validateAnswer функции, как это:
<input type="text" id="answer" name="answer" onkeyup="validateAnswer(this);" />

Затем вы можете определить validateAnswer так:

function validateAnswer(elem){ 
    elem.value = elem.value.replace(/[^\d]/g, ''); 
} 

Вот пример: http://jsbin.com/iwiduq/1/

Answer 3

Вы получаете ключ нажатие из объекта события, переданного обработчику.

input type="text" name="answer" onkeypress="validateAnswer(this, event);" /> 

function validateAnswer(element, event) { 
    if (event.charCode) { 
    if (/\d/.test(String.fromCharCode(event.charCode))) { 
     window.alert("You can not enter numbers in this field"); 
     return false; 
    } 
    } 
} 

Поисковый запрос "onkeypress event" находит много примеров этого.