Почему не коректно выполняется условие?

Question

[Владимир Шикльгрубер]

Привет. Учу js. Не как не могу понять почему инпут блокируется всегда в не зависимости от того занят ник или нет

<form action="/registration/createUserPass" method="post">      
                        <input type="text" name="login"  OnKeyUp="checkLogin(this.value)" class="input"/>
                        <div class="button orange">
                <input type="submit" name="" value="Выбрать имя" onClick="return Formdata(this.form)">
            </div>
        </form>
                
<script type="text/javascript">
function Formdata(data){
/* если не заполнено поле Ваше имя, длина менее 3-x*/
if (data.login != null && data.login.value.length < 3 )
{
document.getElementById("check_login").innerHTML = "<div class='message padd_top_10 padd_bot_10 red'><div><p>ВНИМАНИЕ! Имя слишком короткое.</p></div></div>";
return false;
}

if (data.login != null && data.login.value.length > 25 )
{
document.getElementById("check_login").innerHTML = "<div class='message padd_top_10 padd_bot_10 red'><div><p>ВНИМАНИЕ! Имя слишком длинное.</p></div></div>";
return false;
}
return false;
}
 function getXmlHttp() {
    var xmlhttp;
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
  }
  function checkLogin(login) {
    var xmlhttp = getXmlHttp(); 
    xmlhttp.open('POST', '/api/dataValidation/check_login.php', true); 
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send("login=" + encodeURIComponent(login)); 
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4) { 
        if(xmlhttp.status == 200) { 
          if (xmlhttp.responseText) {
              //если логин занят то блокируем кнопку и выдаём уведомление
                document.getElementById("check_login").innerHTML = "<div class='message padd_top_10 padd_bot_10 red'><div><p>ВНИМАНИЕ! имя занято</p></div></div>";
                document.getElementById('submit').disabled = parseInt(req.responseText) < 1 ? true : false;
            }else{ 
                document.getElementById("check_login").innerHTML = "<div class='message yellow'><div><p>Имя свободно</p></div></div>";
            }
        }
      }
    };
  }
</script>

Как поправить код что бы инпут не был в блоке всегда?

Answer 1

[Алексей Рытиков]

Похоже, что проблема в логике в этой части:

if (xmlhttp.responseText) {
              //если логин занят то блокируем кнопку и выдаём уведомление
                document.getElementById("check_login").innerHTML = "<div class='message padd_top_10 padd_bot_10 red'><div><p>ВНИМАНИЕ! имя занято</p></div></div>";
                document.getElementById('submit').disabled = parseInt(req.responseText) < 1 ? true : false;
            }else{ 
                document.getElementById("check_login").innerHTML = "<div class='message yellow'><div><p>Имя свободно</p></div></div>";
            }

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

Comments

[Алексей Рытиков]

Владимир Шикльгрубер:
document.getElementById('submit').disabled = true;
document.getElementById('submit').disabled = false;

[tplus]

document.getElementById('submit').disabled = parseInt(req.responseText) < 1 ? true : false; - Выражение самое по себе булёвое, то есть можно сократить его до "document.getElementById('submit').disabled = parseInt(req.responseText) < 1"

[Алексей Рытиков]

Владимир Шикльгрубер: document.getElementById('submit').disabled = false;

[Владимир Шикльгрубер]

Алексей Рытиков: не помогло. Вот я полностью убрал блокировку из кода. толку ноль. if (xmlhttp.responseText) {
//если логин занят то блокируем кнопку и выдаём уведомление
document.getElementById("check_login").innerHTML = "ВНИМАНИЕ! имя занято";
//document.getElementById('submit').disabled = parseInt(req.responseText) < 1 ? true : false;
}else{
document.getElementById("check_login").innerHTML = "Имя свободно";
//document.getElementById('submit').disabled = false;
}

[Алексей Рытиков]

Владимир Шикльгрубер: толку ноль – значит, что все еще блокируется, но не разблокируется? Значит, откуда-то из другого места блокируется, в этом коде больше нет места, откуда submit блокируется.
P.S. и самого элемента, подходящего под document.getElementById('submit') у вас в коде нет. Нужно к:

дописать id:

[Алексей Рытиков]

input id="submit" type="submit" name="" value="Выбрать имя" onClick="return Formdata(this.form)"

Answer 2

[Владимир Шикльгрубер]

Убрал я вот этот кусочек кода и всё заработало. Но как быть тогда с валидацией?

function Formdata(data){

if (data.login != null && data.login.value.length < 3 )
{
document.getElementById("check_login").innerHTML = "<div class='message padd_top_10 padd_bot_10 red'><div><p>ВНИМАНИЕ! Имя слишком короткое.</p></div></div>";
return false;
}

if (data.login != null && data.login.value.length > 25 )
{
document.getElementById("check_login").innerHTML = "<div class='message padd_top_10 padd_bot_10 red'><div><p>ВНИМАНИЕ! Имя слишком длинное.</p></div></div>";
return false;
}
return false;
}

Без этого кода сабмит не блочится. и document.getElementById('submit').disabled = parseInt(req.responseText) < 1 ? true : false; до одного места