-1
function EnterCandidates() {
  var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]');

  Array.prototype.forEach.call(names, function(label, index) {
    if (candidateNameInputs[index].value !== candidateNameInputs[index].defaultValue) {
      label.textContent = candidateNameInputs[index].value;
    }
  });
}

I have this code which gets the users input and changes the label with it but i want to add some code which only allows the user to enter letters of the alphabet. How would I go about this using this code?

erohs2000
  • 1
  • 6
  • Get an ascii range for all letters you want and prevent the default behavior when a key pressed the value is not in this range(using javascript). – Bryan Sep 12 '15 at 18:15
  • Let them input anything, and then show them what they're actually sending: http://jsfiddle.net/g1Lbh905/ – zzzzBov Sep 12 '15 at 18:24
  • @erohs2000 i have answered this in you previous question as well. – tech-gayan Sep 12 '15 at 18:30

5 Answers5

2

If you are using modern browsers then user html5 validation - 

<input type="text" name="name" class="field" pattern="[a-zA-Z ]+" />

It accepts a-z and A-Z plus space

Vishnu Atrai
  • 2,370
  • 22
  • 24
0

listen to keyDown event and match with this regex:

/[a-zA-Z]+/

if you're targeting modern browsers only, you can try this:

<input type="text" pattern="[a-zA-Z]" title="Only letters" />
Chris
  • 1,829
  • 1
  • 15
  • 22
0
var val = document.getElementById('id').value;

if (!val.match(/^[a-zA-Z]+$/)) 
{
alert('Only alphabets are allowed');
return false;
}

full script

function EnterCandidates() {
console.log('woo');
var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
    names = document.querySelectorAll('label[for^=V][id^=L_V]');

Array.prototype.forEach.call(names, function (label, index) {
    if (!candidateNameInputs[index].value.match(/^[a-zA-Z]+$/)) 
     {
         alert('Only alphabets are allowed');
    }
    else
    {
         if (candidateNameInputs[index].value !==  candidateNameInputs[index].defaultValue) {
        label.textContent = candidateNameInputs[index].value;
    }
    }

});
}
tech-gayan
  • 1,373
  • 1
  • 10
  • 25
  • @mail-nv not really, especially for this use case. – Muhammad Umer Sep 12 '15 at 18:23
  • http://stackoverflow.com/questions/10940137/regex-test-v-s-string-match-to-know-if-a-string-matches-a-regular-expression - this is the speed of match vs test and IT MATTERS, even in this case! And see here: http://jsperf.com/regexp-vs-indexof – Wolfgang Sep 12 '15 at 18:29
  • yes there will be a difference if you user is going to be typing 600,000 times per minute. Then the user will some performance degradation. – Muhammad Umer Sep 12 '15 at 18:35
  • As Muhammad Umer said in this case its micro performance issue. – tech-gayan Sep 12 '15 at 18:39
  • @Iceburg It seems to be in a loop. How do I make it so it only displays it once without having to click ok a couple of times? – erohs2000 Sep 12 '15 at 22:14
0

you can't avoid that the user types non alphabetic characters. But you can: - control the input fields (onkeydown) and check if there are some characters you don't want Stackoverflow - force input to only alpha-letters - do the same before the label.textContent = candidateNameInputs[index].value; line and filter/replace the characters you don't want

Community
  • 1
  • 1
Wolfgang
  • 320
  • 3
  • 12
0

Here is one way to do it using Javascript.

http://jsfiddle.net/q60gm0ra/

var input = document.getElementById('alpha');

input.addEventListener('keypress',function(e) { 
    var str = String.fromCharCode(e.charCode);
    if (!(/[A-Z]|\s/i).test(str)) {
       e.preventDefault();
    }
});
Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168