JS TypeError при проверке, если нуль

Я пытаюсь проверить, если поля не заполнены или нет, но он всегда выдает эту ошибку:JS TypeError при проверке, если нуль

TypeError: document.getElementById(...) is null

Вот код: http://pastebin.com/v8mDwG2i

Я использую JQuery UI и jQuery. Проблема с минами в том, что она всегда выбрасывает нуль и ломает эту линию.

источник

2014-11-07 TheSlovakGuy

Если вы используете jQuery, то почему бы и нет используйте '$ (" # id ")', а не 'document.getElementById (" id ")'? – ntzm

В какой строке вы ссылаетесь на свой код? У вас есть document.getElementById (...) 'в нескольких местах. Они все это делают? –

Я сделал небольшие изменения http://jsbin.com/letowe/1/edit?html,js. Если вы используете jQuery, вам не нужно использовать onload и onclick в html. –

Вы получаете эту ошибку, потому что в JS вы проверяете идентификатор, но в HTML у вас нет тега id, только тег name.

Я изменил name="..." на каждый входной элемент до id="...".

Но были и другие ошибки в вашем коде. Ниже приведен рабочий фрагмент кода со всеми фиксированной те ошибки, и объяснение того, что я изменился:

JS, CSS, HTML:

$(window).on('load',function(){ 
 
    $("#submitBtn").hide(); 
 
    $("#logStat").hide(); 
 

 
    $('#preCheckBtn').click(function(){ 
 
    $("#logStat").fadeIn(200); 
 
    $("#progBar").progressbar(); 
 

 
    $("#progBar").progressbar("value", 0); 
 
    $("#writeThis").html("Verifying name..."); 
 
    if ($("#nameIn").val() == (null||"")) { 
 
     $("#writeThis").html("ERROR: Name is empty."); 
 
     setTimeout(function(){$("#logStat").fadeOut(200);},2000); 
 
     return; 
 
    } 
 

 
    $("#progBar").progressbar("value", 25); 
 
    $("#writeThis").html("Verifying ID..."); 
 
    if ($("#idIn").val()==(null||"") || isNaN($("#idIn").val())) { 
 
     $("#writeThis").html("ERROR: ID is empty or has wrong format."); 
 
     setTimeout(function(){$("#logStat").fadeOut(200);},2000); 
 
     return; 
 
    } 
 

 
    $("#progBar").progressbar("value", 50); 
 
    $("#writeThis").html("Verifying phone number..."); 
 
    if ($("#phoneIn").val()==(null||"") || isNaN($("#phoneIn").val())) { 
 
     $("#writeThis").html("ERROR: Phone Number is empty or has wrong format."); 
 
     setTimeout(function(){$("#logStat").fadeOut(200);},2000); 
 
     return; 
 
    } 
 

 
    $("#progBar").progressbar("value", 75); 
 
    $("#writeThis").html("Locking data..."); 
 
    $("#nameIn").attr("disabled", true); 
 
    $("#idIn").attr("disabled", true); 
 
    $("#phoneIn").attr("disabled", true); 
 

 
    $("#submitBtn").show(); 
 
    $("#progBar").progressbar("value", 100); 
 
    $("#writeThis").html("Done!"); 
 
    setTimeout(function(){$("#logStat").fadeOut(200);},1000); 
 
    }); 
 
});

body{ 
 
    font-family: sans-serif; 
 
    width: 1020px; 
 
    margin: 25px auto; 
 
} 
 
#logStat{ 
 
    margin: auto; 
 
    text-align: center; 
 
    padding: 10px; 
 
    width: 60%; 
 
    border-radius: 5px; 
 
    background-color: #B3B3B3; 
 
}

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> 
 

 
<body> 
 
    <form action="data/scripts/submit_form.php" method="post"> 
 
    <input type="text" placeholder="Name" id="nameIn" required /><br /> 
 
    <input type="text" placeholder="ID" id="idIn" required /><br /> 
 
    <input type="text" placeholder="Phone number" id="phoneIn" maxlength="10" required /><br /> 
 
    <input type="submit" value="Run PHP" id="submitBtn" /> 
 
    </form> 
 
    <button id="preCheckBtn">Pre-check data</button> 
 
    <div id="logStat"> 
 
    <div id="progBar"></div> 
 
    <p id="writeThis"></p> 
 
    </div> 
 
</body>

( скрипку : http://jsfiddle.net/sdbhu7yL/8/)

В t он второй и третий if-clause вы проверяете только элемент ввода, а не его значение. Я думаю, вы, наверное, просто забыли .value, поэтому я изменил его, чтобы проверить значение.
В тех же if-предложениях, isNaN(checkData) дает ошибку, потому что checkData не объявлен, он не определен. Я изменил его на isNaN($("#someID").val()), чтобы проверить значение напрямую.
Во всех ваших if-предложениях я изменил ==null на ==(null||""). В противном случае, если вы нажмете кнопку предварительной проверки, в то время как одно или несколько полей ввода будут по-прежнему пустыми, все они все равно будут отключены, и вы больше не сможете заполнять пустые поля. (Я не уверен, что если отключить их - такая хорошая идея, во-первых, потому что пользователь может ошибиться, заполнив их, а затем он/она больше не сможет ее исправить.)
Я положил CSS и JS в отдельных файлах. Это хорошая практика: разделить разные типы кода. (В фрагменте кода и jsfiddle они находятся только в отдельных под-окнах, но на вашем фактическом сайте вам нужно ссылаться на файлы CSS и JS - так же, как вы ссылаетесь на файлы jQuery .js и .css.)
Я удалил функцию loaded(). Вся идея jQuery's document.ready и window.load заключается в замене нормального JavaScript window.onload.
Что вы делаете, так это: при загрузке страницы вы вызываете функцию loaded() (изнутри вашего тела HTML), и внутри этой функции вы проверяете document.ready. Это очень избыточно.
Плюс, document.ready вызывается до window.load, поэтому класть document.ready внутри функции, вызываемой нагрузкой, не имеет никакого смысла.На самом деле, первые две строки .hide() не были выполнены; submitBtn и logStat оставался видимым, потому что вы проверили на document.ready после window.load, но document.ready срабатывать не будет больше, потому что это уже произошло до того window.load.
(я рекомендую всегда использовать window.load кстати, если нет особой необходимости в document.ready.)
Я поставил window.load вокруг всего кода, а не только первые две .hide() линии. Так предпочтительно использовать window.load.
Я удалил type="button" с вашей предварительной проверки в HTML. type="button" используется только для элементов ввода, чтобы классифицировать его как кнопку (потому что есть больше типов ввода). Если вы уже используете выделенный элемент <button>, вам больше не нужен type="button".
Я дал контрольную кнопку ID и переместил onclick-привязку к jQuery: $('#preCheckBtn').click(function(){ ...});. Чистое иметь все JS-код в JS-файле. Read about it here.
Я перевел все свои регулярные JavaScript для JQuery (например document.getElementById("someID").innerHTML = ...; к $('#someID').html(...);.
Я добавил $("#submitBtn").show(); в конце концов, я думаю, вы, вероятно, просто забыл добавить (я предполагаю, что вы хотите, чтобы кнопка, чтобы показать, когда все, если -clauses)
Я изменил ваши сообщения "ERROR: ID is NULL." на более удобный текст, потому что это сообщение NULL-ошибки также отображается при вводе текста (вместо цифр), что делает сообщение неправильным. (Это больше вопрос дизайна, конечно, не стесняйтесь меня ненавидеть.)

источник

2014-11-08 02:50:24 myfunkyside

JS TypeError при проверке, если нуль

ответ

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