2016-12-22 2 views
0

Я хочу, чтобы функция nameVerification() выкинула сообщение alert(), когда пользователь набрал submit. Например, если пользователь вводит что-то вроде 45 в поле name, я хочу, чтобы alert в nameVerification() вызываемой функции. Прямо сейчас, когда пользователь вводит число в поле name, вызывается alert() в функции formSubmission().Почему мое предупреждение не работает в одной из моих функций?

Сторона примечания: formSubmission функция работает совершенно. Другими словами, если пользователь вводит номер < 13 в поле age, функции alert() вызывается обычно без проблем. Если пользователь вводит число> 13, он также работает без проблем. Просто подумал, что я дам тебе, ребята, это знать.

signUp.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Signup Form</title> 
    <script type="text/javascript" src="signUp.js"></script> 
</head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="signUp.css"> 
<body> 

<form class="col-md-4 col-md-offset-4" name="formHandler" id="handle"> 
     <div class="moveUsername"> 
      <label for="usr">Name:</label> 
      <input type="field" class="form-control" id="nameVerify" placeholder="Username" required="required">  
     </div> 

     <div class="ageMovement"> 
      <label for="usr" >Age (Must be 13 years or older to play):</label> 
      <input type="field" class="form-control" id="ageVerify" name="ageChecker" placeholder="Age" required="required"> 
     </div> 

     <button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button> 
    </form> 

</body> 
</html> 

signUp.js

function nameVerification() { 
    var name = document.getElementById("nameVerify").value; 

    if(typeof name !== 'string') { 
     alert("That's not a name!"); 
    } 
} 

function formSubmission() { 
    var age = document.getElementById("ageVerify").value; 

    if(age < 13) { 
     alert("You're too young, you can't play the game"); 
    } 
} 
+1

почему у вас есть 2 OnClick атрибутов? вы можете сжать их до следующего вида: 'onclick =" formSubmission(); nameVerification() "' –

+1

Кроме того, переменная 'name' будет ВСЕГДА иметь строку типа - поэтому вызов условного предупреждения() никогда не будет запущен, даже если nameVerification() выполняется. Вы должны проверить пустую строку – IAmDranged

ответ

0

Вы можете изменить функцию nameVerification следующим образом:

функция nameVerification() { имя вар = document.getElementById ("nameVerify").стоимость;

if (name) { 
     var num = parseInt(name) || -1; 
     if (num >= 0 && num < 13) { 
      alert("That's not a name!"); 
     } 
    } 
} 

и изменение значения OnClick в HTML, чтобы быть:

OnClick = "formSubmission(); nameVerification()"

+0

Работает как шарм! Благодарю вас: D. Одна вещь, хотя, пожалуйста, пожалуйста, объясните, что означает '-1'? Еще раз спасибо :). – reppo

+0

Несомненно. Первая часть проверки заключается в том, чтобы увидеть, может ли введенное значение анализироваться на значение Integer, если оно не может быть проанализировано, -1 действует как проверка ошибки. Если не число, то верните -1. Существуют и другие проверки, которые вы можете использовать как NaN в javascript и т. Д., Но это оказалось проще. Поэтому, если вы получите -1, тогда у вас есть текст, а не номер. – sjramsay

+0

Gotcha, спасибо кучу: D – reppo

3

age также в этой функции а string:

function formSubmission() { 
    var age = document.getElementById("ageVerify").value; 

    if(age < 13) { 
     alert("You're too young, you can't play the game"); 
    } 
} 

Если вы хотите сделать числовое сравнение, вы необходимо проанализировать сначала:

function formSubmission() { 
    var age = document.getElementById("ageVerify").value; 

    if (age) { 
     var ageInteger = parseInt(age, 10); 

     if (ageInteger < 13) { 
      alert("You're too young, you can't play the game"); 
     } 
    } 
} 
0

Это потому, что javascript еще не загружен.

Move:

<script type="text/javascript" src="signUp.js"></script> 

чуть выше </body> тега.

3

У вас есть два OnClick атрибутов на кнопку

<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button> 

Вы можете иметь только один

+0

О, хорошо. Я использовал логику, где, если это одна и та же кнопка отправки, которая может вызвать эти ошибки, я мог бы также иметь два атрибута onclick. – reppo

+0

К сожалению, у вас может быть только один. Так имяVerification() на самом деле никогда не называется –

0

Вы должны использовать ParseInt:

var age = parseInt(document.getElementById("ageVerify").value); 
1

Ваш typeof тест терпит неудачу, потому что значение, возвращаемое текстовый ввод всегда имеет строку типа. Вы можете проверить, чтобы увидеть, если Указаное значение текста является цифровым с помощью следующей функции:

function isNumeric(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

Реального ответа, однако, является то, что вам нужно улучшить тесты проверки входных данных, чтобы определить, что вы хотите , а не тест для всех вещей, которые вы не хотите. Например, тестирование числового значения, как указано выше, не будет работать, если кто-то ввел «t @ ^!» в поле, которое, вероятно, не является значением, которое вы хотели бы использовать в поле имени. Здесь regular expressions, и могут помочь поля built-in validations from HTML.

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