Проблемы с тестированием веб-формы HTML

Я пытаюсь протестировать HTML-форму, но у меня возникают некоторые проблемы.Проблемы с тестированием веб-формы HTML

Форма открывает дополнительный HTML-файл (показывает сообщение об успешном завершении), если все данные введены правильно. Если данные не введены, или если данные введены неправильно, имя поля должно быть красным и отобразится сообщение, позволяющее пользователю повторно вводить информацию.

Я открыл файл непосредственно из Finder (я нахожусь на Mac) в Google Chrome, где он отображается полностью. Однако, независимо от того, что я помещал (или не помещал) в поля ввода, код направляет меня на сообщение об успешном завершении.

Код выглядит следующим образом:

<head> 
<title>Form</title> 

<script language="javascript" type="text/javascript"> 

function validateForm() { 
    var result = true; 
    var msg=""; 

    if (document.Entry.name.value=="") { 
     msg+="You must enter your name \n"; 
     document.Entry.name.focus(); 
     document.getElementById(‘name’).style.color="red"; 
     result = false; 
    } 
    if (document.Entry.age.value=="") { 
     msg+="You must enter your age \n"; 
     document.Entry.age.focus(); 
     document.getElementById(‘age’).style.color="red"; 
     result = false; 
    } 
    if (document.Entry.number.value=="") { 
     msg+="You must enter your number \n"; 
     document.Entry.number.focus(); 
     document.getElementById(‘number’).style.color="red"; 
     result = false; 
    } 

    if(msg==""){ 
    return result; 
    } 

    { 
    alert(msg) 
    return result; 
    } 
} 

</script> 
</head> 

<body> 
<h1>Form</h1> 
<form name="Entry" method="post" action="success.html"> 
<table width="50%" border="0"> 
    <tr> 
     <td id="name">Name</td> 
     <td><input type="text" name="name" /></td> 
    </tr> 
    <tr> 
     <td id="age">Age</td> 
     <td><input type="text" name="age" /></td> 
    </tr> 
    <tr> 
     <td id=”number”>Number</td> 
     <td><input type="text" name="number"/></td> 
    </tr> 

<tr> 
    <td><input type="submit" name="Submit" value="Submit" onclick="return 
    validateForm();" /></td> 
    <td><input type="reset" name="Reset" value="Reset" /></td> 
</tr> 

</table> 
</form> 
</body>

Я посмотрел на код, и я уверен, что это правильно, так почему не HTML работы по назначению?

источник

2014-11-24 gulliver

У вас, кажется, есть некоторые ошибки в консоли для этого оператора: document.getElementById ('name'). Style.color = "red"; –

Вы используете неправильный символ одиночной кавычки для разграничения строк. Вы используете '' 'и' '', когда будете использовать '' '. – Dai

может быть время, чтобы изменить ваш редактор! –

Ваш код содержит ошибки, в том числе:

Wrong "'" гольцов
Wrong '"' гольцов
Используя зарезервированное слово 'номер'

Ниже неподвижная (по крайней мере, в Firefox):

<!DOCTYPE html> 
<html> 
<head> 
<title>Form</title> 
<script type="text/javascript"> 
function validateForm() { 
    var result = true; 
    var msg=""; 
    if (document.Entry.name.value=="") { 
     msg+="You must enter your name \n"; 
     document.Entry.name.focus(); 
     document.getElementById('name').style.color="red"; 
     result = false; 
    } 
    if (document.Entry.age.value=="") { 
     msg+="You must enter your age \n"; 
     document.Entry.age.focus(); 
     document.getElementById('age').style.color="red"; 
     result = false; 
    } 
    if (document.Entry.mumber.value=="") { 
     msg+="You must enter your number \n"; 
     document.Entry.mumber.focus(); 
     document.getElementById('number').style.color="red"; 
     result = false; 
    } 
    if(msg == ""){ 
     return result; 
    } 
    else 
    { 
     alert(msg) 
     return result; 
    } 
} 
</script> 
</head> 
<body> 
<h1>Form</h1> 
<form name="Entry" id="Entry" method="post" action="success.html" onsubmit="return validateForm()"> 
    <table width="50%" border="0"> 
     <tr> 
      <td id="name">Name</td> 
      <td><input type="text" name="name" /></td> 
     </tr> 
     <tr> 
      <td id="age">Age</td> 
      <td><input type="text" name="age" /></td> 
     </tr> 
     <tr> 
      <td id="number">Number</td> 
      <td><input type="text" name="mumber"/></td> 
     </tr> 
     <tr> 
      <td><input type="submit" name="Submit" value="Submit" /></td> 
      <td><input type="reset" name="Reset" value="Reset" /></td> 
     </tr> 
    </table> 
</form> 
</body> 
</html>

Будет разумным инициировать переменную «result» как «false». Таким образом, вам нужно обновить его только один раз - когда «msg» пуст.

Кажется, что вы должны выбрать другой редактор/IDE. Кроме того, попробуйте отладить ваши сценарии JS - у вас есть отладчики для всех современных браузеров. Я лично использую Firebug addon для Firefox. Многие люди используют инструменты разработчика Chrome.

Кроме того, вы можете найти эту простую ссылку под рукой: http://www.w3schools.com/js/js_form_validation.asp

источник

2014-11-24 20:00:27 a1111exe

Ваша форма является success.html, следовательно Ваша форма отправляет на эту страницу, независимо от вашего javascript.
Функция Javascript запускает on click, но ее кнопка submit, поэтому подача все еще срабатывает. Страница, на которую он отправлен, является success.html, поэтому это постоянно вызывается независимо от того, что форма постоянно отправляется.

источник

2014-11-24 19:27:55 Craicerjack

Проблема связана с тем, как вы получаете доступ к входам формы. Введите это в консоли, или в начале вашего блока сценария:

console.log(document.Entry);

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

Предлагаю взглянуть на this question, чтобы увидеть различные способы доступа к входам форм с использованием ванильного javascript.

источник

2014-11-24 19:42:11 aviemet

Я переписать код. Теперь он работает.Вы можете проверить рабочий пример JSFiddle - http://jsfiddle.net/uj5xcp26/ или скопировать & пример вставки ниже:

<html> 
    <head> 
     <title>Form</title> 
    </head> 
    <body> 
    <h1>Form</h1> 
    <form name="Entry" method="post" action=""> 
     <table width="50%" border="0"> 
      <tr> 
       <td id="name">Name</td> 
       <td><input type="text" name="name"/></td> 
      </tr> 
      <tr> 
       <td id="subject">Age</td> 
       <td><input type="text" name="age" id="age" /></td> 
      </tr> 
      <tr> 
       <td id=”number”>Number</td> 
       <td><input type="text" name="number" id="number"/></td> 
      </tr> 

      <tr> 
       <td><button onclick="validateForm();" id="submit_btn" type="button" name="Submit" value="Submit">Submit</button></td> 
       <td><input type="reset" name="Reset" value="Reset" /></td> 

      </tr> 
     </table> 
    </form> 


    <script type="text/javascript"> 
     //Assuring page is loaded 
     document.onload = function(){ 
      validateForm(); 
     }; 

     var validateForm = function() { 
      var result = true; 
      var msg=""; 
      var name,age,number; 


      name = document.getElementsByName("name")[0]; 
      age = document.getElementsByName("age")[0]; 
      number = document.getElementsByName("number")[0]; 

      //Conditionals 
      if (name.value =="") { 
       msg+="You must enter your name \n"; 
       name.focus(); 
       name.style.color="red"; 
       result = false; 
      } 
      if (age.value=="") { 
       msg+="You must enter your age \n"; 
       age.focus(); 
       age.style.color="red"; 
       result = false; 
      } 
      if (number.value=="") { 
       msg+="You must enter your number \n"; 
       number.focus(); 
       number.style.color="red"; 
       result = false; 
      } 

      if(msg==""){ 
       return result; 
      } 

      { 
       alert(msg); 
       return result; 
      } 

     }; 
    </script> 
    </body> 
    </html>

источник

2014-11-24 20:36:11

Во-первых, попытаться положить скрипт после вашей формы в организме.

Во-вторых, я согласен с вашей формой, действие будет срабатывать независимо. Не можете ли вы обрабатывать сообщение с помощью innerHTML.

источник

2014-11-24 23:23:19 Creaven

Проблемы с тестированием веб-формы HTML

ответ

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