Простая форма ввода Javascript с динамически заменяемым обязательным полем сообщения DOM - PullRequest
Новая
       11

Простая форма ввода Javascript с динамически заменяемым обязательным полем сообщения DOM

0 голосов
/ 02 апреля 2012

Хорошо, так что мой код в значительной степени работает ... за исключением случаев, когда вы нажимаете кнопку "Отправить" второй раз , и все еще остается пустое поле, добавлено * обязательно в тегах ярлыка передтеги ввода будут дублироваться .Это плохо!Я могу предупредить nodeValue после функции (x), но каким-то образом есть проблема с оповещением где-либо еще ... что также, я считаю, является причиной, по которой я не могу использовать простое решение if, которое я прокомментировал внизумоего кода.

Буду весьма признателен за любые изменения в моем коде или предложения.Кроме того, я хотел бы, чтобы некоторые ссылки следовали.Надеюсь, однажды я смогу думать достаточно программно, чтобы вернуть SO ...

Большое спасибо заранее. Вот мой код:

Javascript: 

var obj = {


form : document.getElementsByTagName('input'),
btn : document.getElementById('submit'),

init : function(){

obj.btn.form.onsubmit = obj.handleEvent;

},

handleEvent : function(){

for (var i=0; i<obj.form.length; i++){

    if (obj.form[i].value===''){

    switch(obj.form[i].name){
        case 'fname' : 
        case 'lname' : 
        case 'phone' : 
        case 'email' : match=true; obj.error(obj.form[i]); break;  
        }   
    }
}
return false; 
},


error : function(x) {
    var req = document.createTextNode(' * required');
    var span = x.previousSibling.appendChild(document.createElement('span'));
    span.className = 'error';
 //     if (x.previousSibling.firstChild.nextSibling.firstChild.nodeValue !== ' *    required'){
        span.appendChild(req);
  //        }

  //      alert(x.previousSibling.firstChild.nextSibling.firstChild.nodeValue);
   }   
 }

и HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link type="text/css" href="css/main.css" rel="stylesheet" />

<head>
    <title>JavaScript Input form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <form method="post" action="">
        <div>
            <ul>
                <li><label>First Name</label><input type="text" name="fname" size="30" /></li>
                <li><label>Last Name</label><input type="text" name="lname" size="30"  /></li>
                <li><label>Phone</label><input type="text" name="phone" size="30"  /></li>
                <li><label>Email</label><input type="text" name="email" size="30" /></li>
                <li><input type="submit" name="submit" id="submit" value="Submit" />
           </ul>
      </div>
      </form>
 <script type="text/javascript" src="input.js"></script>
 <script type="text/javascript">obj.init();</script>
 </body>
 </html>

Еще раз спасибо за чтение!

1 Ответ

0 голосов
/ 02 апреля 2012

Просто очистите ваш диапазон, прежде чем проверять поля ввода.

...