2013-11-07 4 views
0

Я пытаюсь получить мою форму, проверенную с помощью javascript, но она, похоже, не работает.Почему мой javascript не подтверждает мою html-форму?

Может ли кто-нибудь увидеть, где ошибка в моем коде?

Это мой HTML-код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/> 
<script src="js/validation.js"></script> 
<title>Form</title> 
</head> 
<body> 
<form name="myForm" method="post" onsubmit="return validateForm()"> 
    <fieldset> 
     <legend> Please fill out this Form</legend> 
     <p> 
      <label class="field" for"name"> First name:</label> 
      <input type="text" name="fname" class="textbox-300"/> 
     </p> 
     <p> 
      <label class="field" for"name">Last name:</label> 
      <input type="text" name="lname" class="textbox-300"/> 
     </p> 
     <p> 
      <label class="field" for"name">Email:</label> 
      <input type="text" name="email" class="textbox-300"/> 
     </p> 
     <p> 
      <label class="field" for"name">Phone:</label> 
      <input type="text" name="phonenumber" class="textbox-300"/> 
     </p> 
     <p> 
      <label class="field" for"name">Adress:</label> 
      <input type="text" name="address" class="textbox-300"/> 
     </p> 
     <p> 
      <input type="submit" value="submit"> 
     </p> 
    </fieldset> 
</form> 
</body> 
</html> 

код My Java Script, чтобы проверить мой HTML

function validateForm() { 
    var x = document.forms['myForm']['fname'].value; 
    var y = document.forms['myForm']['lname'].value; 
    var i = document.forms['myForm']['email'].value; 
    var j = document.forms['myForm']['phone'].value; 
    var address = document.forms['myForm']['address'].value; 
    var atpos = i.indexOf("@"); 
    var dotpos = i.lastIndexOf("."); 
    // ______________________________________________ 
    if (x == null || x == "") { 
     alert("First Name must be Entered"); 
     return false; 
    } 
    //___________________________________________ 
    if (y == null || y == "") { 
     alert("Last Name must be Entered"); 
     return false; 
    } 
    //___________________________________________ 
    if (parseInt(j) != j) { 
     alert("Please enter a correct phone number"); 
     return false; 
    } 
    //___________________________________________ 
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= i.length) { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 
    //___________________________________________ 
    if (address == null || address == "") { 
     alert("You most enter your Address"); 
     return false; 
    } 
} 

Я пошел снова и снова, и я не могу найти ошибку.

+0

Что именно происходит? И я бы рекомендовал использовать jQuery для этого: http://jquery.com/ – puelo

+1

Во второй последней строке я надеюсь, что вы наберете его '** /' по ошибке. –

+1

Какая ошибка у вас? – benzonico

ответ

3

Во-первых, в будущем , пожалуйста, попытайтесь уменьшить свой код до небольшого примера, вместо того, чтобы накладывать всю страницу на вопрос. Хороший способ сделать это - jsFiddle.

Во-вторых, внесите свой код в действие! Я прошел и исправил ваш сломанный HTML, например. различные биты, такие как for"name" в вашем коде, который должен быть for="name".

В-третьих, после устранения этого было ясно, что проблема (которая показана на консоли вашего браузера, ключевая вещь для отладки Javascript) заключалась в том, что вы пытались получить value из undefined. Это означает, что где-то вы звонили value на то, чего не было.

Глядя через JavaScript, и сравнивая его к HTML, мы видим, этот контраст:

HTML

<p> 
    <label class="field" for"name">Phone:</label> 
    <input type="text" name="phonenumber" class="textbox-300" /> 
</p> 

Javascript

var j = document.forms['myForm']['phone'].value; 

Вы видите проблему? Ваш элемент имеет имя phonenumber, пока вы обращались к phone. Если вы измените код на document.forms['myForm']['phonenumber'].value, он отлично работает.

Here is your code in a working jsFiddle.

Наконец, конечно, ваша основная проблема может быть сведена как «изобретать колесо». То, что вы делаете, было реализовано так много раз (и во много раз лучше для загрузки). Посмотрите на фреймворки, которые сделают для вас работу, и особенно современные, которые используют валидацию формы, встроенную в HTML5.

+1

Не думайте, что вы заслуживаете плату за это;) – MarsOne

+0

im только после моего 6-го класса в колледже веб-разработчика, я не знаю, что jsFiddle даже есть или делает :) но спасибо любым способом, все равно не дает мне своих предупреждений, когда я не введите его propperly, так что все еще не исправлено даже после того, как я исправил wht u сказал –

+0

@WagnerMaximiliano Посмотрите в консоль вашего браузера. Это даст вам ошибки, объясняющие, почему ваш код не работает. – lonesomeday

0

Просто измените Java код сценария:

var j = document.forms['myForm']['phone'].value; 

С

var j = document.forms['myForm']['phonenumber'].value; 

Вот ваша удача (JsFiddle)

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