2015-03-01 5 views
0

У меня есть html-форма и вы хотите создать Javascript-код, который бы проверял, есть ли Tel. поле содержит только числа. Это упражнение, поэтому я не хочу использовать jQuery или любую другую библиотеку. Я поставил вместе это:Проверка ввода формы Javascript

HTML

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return numberedFieldsCheck()"> 
<table> 
<tr> 
<td> 
<label for="tel">Telephone</label></td> 
<td> 
<input type="text" placeholder="00441293603275" name="tel" id="tel" /> 
<span id="telFieldIntCheck" style="display:none;color:red">You can only use numbers.</span> 
</td> 
<td> 
<input type="submit" name="button" id="button" value="Submit" /> 
</td> 
</tr> 
</table></form> 

JS

function numberedFieldsCheck(){ 
    var x=document.getElementById('tel').value;// retrieving value from the form 
    console.log(x); 
    if(!integerCheck(x)){ 
     alert('wrong format'); 
     document.getElementById('telFieldIntCheck').style.display="inline"; 
     return false; 
     } 
    } 

function integerCheck(userInput) { 
var userInputArr=userInput.split(''); 
for (i=0;i<userInputArr.length;i++){ 
    if (typeof userInputArr[i]=="number") 
      {console.log('format ok')} 
    else {return false}; 
    } 
} 

Можете ли вы помочь мне с кодом? Он предупреждает неправильный формат, независимо от того, что я ввел в поле ввода. Журналы консоли отображаются в течение миллисекунды и сразу исчезают.

+0

Что такое консольный выход? Ничего? Вы нажимаете кнопку «Отправить»? – BaseZen

+0

Вы должны изменить этот 'onsubmit =" numberedFieldsCheck() "' на этот 'onsubmit =" return numberedFieldsCheck() "' – hindmost

+0

@hindmost: если то, что я знаю правильно, его функция также должна явно возвращать значение 'true', если все все в порядке, верно? Я знаю, что по умолчанию возвращает 'undefined'. – limekin

ответ

1

Так как вам нужно только проверить, если поле содержит только цифры, то это должно работать:

function numberedFieldsCheck(){ 
    var x=document.getElementById('tel').value; 

    // Checks if the field is empty. 
    if(x.trim() == '') { 
    alert("Tel field can't be empty."); 
    return false; 
    } 

    if(!integerCheck(x)){ 
     alert('Wrong format !'); 
     document.getElementById('telFieldIntCheck').style.display="inline"; 
     return false; 
    } 

    alert("Alright !"); 
    // Note that this return true is important. You weren't 
    // returning anything even in the case where everything was fine. 
    // If you don't, it will return 'undefined' by default, which is 
    // casted to 'false' in checks. So that means the function returns 
    // false even if everything is alright. 
    return true; 
} 

function integerCheck(userInput) { 

    // Now, all the elements of usrInputArr will contain strings only. 
    // That means typeof <element> will always return "string". 
    var userInputArr=userInput.split(''); 

    for (i=0;i<userInputArr.length;i++){ 
     char = userInputArr[i]; 
     // Comparing by ASCIIs should work just fine. 
     if (! (char >= '0' && char <= '9' || char == ' ')) 
      return false; 
    } 

    return true; 
} 

Вы также должны делать то, что @hindmost сказал в комментариях к вопросу т.е. изменяющимися формами onsubmit к return numberFieldCheck().

+0

Спасибо - это сработало. – DDEX

Смежные вопросы