Получение Javascript для работы с формой HTML

Я работаю над своим первым документом Javascript, и я не уверен, что не так с этим кодом. У меня был более опытный друг, и он тоже не может найти ничего плохого. Валидаторы не выводят предупреждающее сообщение, когда я ввожу что-то в поля.Получение Javascript для работы с формой HTML

<!DOCTYPE html> 

<html> 
<head> 
    <title>Payment Form</title> 
    <link rel="stylesheet" type="text/css" href="paymentform.css"> 

<script type="text/javascript"> 

function validateCard() { 
    var x = document.getElementById("1").value; 
    if (x.length < 16) { 
     alert("Card Number must be 16 numbers long"); 
     return false; 
    } 
} 

    function validateCVC() { 
    var x = document.getElementById("2").value; 
    if (x.length != 3) { 
     alert("CVC must be 3 digits long"); 
     return false; 
    } 
} 


function validateName() { 
    var x = document.getElementById("3").value; 
    if (x == "") { 
     alert("Please enter a name"); 
     return false; 
    } 
} 

function validateMonth() { 
    var x = document.getElementById("4").value; 
    if (x < 1 || > 12 || x == "") { 
     alert("Must be a number between 1 and 12"); 
     return false; 
    } 
} 

function validateYear() { 
    var x = document.getElementById("5").value; 
    if (x < "2016" || x == null){ 
     alert("Must be the year 2016 or higher"); 
     return false; 
    } 
} 

function allfuncs() { 
     validateCard(); 
     validateCVC(); 
     validateName(); 
     validateMonth(); 
     validateYear(); 
} 
</script> 

</head> 

<img src="BlackBot logo.png" alt="Black Bot Computers" width="200px" height="100px"> 
</h1> 
<h1 align="center">Payment Form</h1> 
<HR COLOR="green" WIDTH="60%"> 

<body> 
<br> 
<center><form onSubmit="allfuncs()"> 

<br> 
    <div class="form-row"> 
    <label>Card number</label> 
    <input id="1" class="card-number" type="text" size="20" /> 
    </div> 
<br> 
    <div class="form-row"> 
    <label>CVC</label> 
    <input id="2" class="card-cvc" type="text" size="4" /> 
    </div> 
<br> 
    <div class="form-row"> 
    <label>Name</label> 
    <input id="3" class="card-holdername" type="text" size="20" /> 
    </div> 
<br> 
    <div class="form-row"> 
    <label>Expiry date (MM/YYYY)</label> 
    <input id="4" class="card-expiry-month" type="text" size="2" /> 
    <span></span> 
    <input id="5" class="card-expiry-year" type="text" size="4" /> 
    </div> 
<br> 
<br> 

    <input type="submit" value="Submit"> 
<br> 
<br> 

</form></center> 
</body> 

</html>

Если кто-нибудь может помочь найти проблему, это будет большой помощью!

источник

2016-03-11 Dafzr308

Вы можете начать с открытия консоли браузера (F12) и отметить синтаксические ошибки, которые у вас есть, а затем исправить их самостоятельно? – adeneo

Я заставлю вас начать -> '(x < 1 || > 12 || x ==" ")', обратите внимание, как у вас есть '|| > 12', что должно '12' быть больше? – adeneo

Искренне извиняюсь, это была единственная ошибка в документе, я просто этого не видел – Dafzr308

В моей консоли отображается ошибка в вашей функции validateMonth(). В частности, @if (x < 1 || > 12 || x == ""). Просто измените следующую инструкцию:

функция validateMonth() { var x = document.getElementById ("4"). Значение;

if (x < 1 || x > 12 || x == "") { 
     alert("Must be a number between 1 and 12"); 
     return false; 
    }

}

Это должно исправить вашу ошибку.

источник

2016-03-11 17:42:57 KpTheConstructor

Вам необходимо сообщить, что форма не продолжена, если проверка не завершена. Это делается путем возврата false к вызову onSubmit в вашем примере. Вот что вам нужно изменить в js.

function allfuncs() { 
    if(!validateCard()){return false;} 
    if(!validateCVC()){return false;} 
    if(!validateName()){return false;} 
    if(!validateMonth()){return false;} 
    if(!validateYear()){return false;} 
    return true; 
}

Затем измените свой form звонок.

<form onSubmit="return allfuncs();">

Как указано в других комментариях и ответах, у вас также есть синтаксическая ошибка, которая устранена этим.

if (x < 1 || x > 12 || x == "") {

источник

2016-03-11 17:52:07 OffTheBricks

Получение Javascript для работы с формой HTML

ответ

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