Проверка JavaScript, если форма нулевая

Question

Я очень новичок в Javascript, поэтому, пожалуйста, будьте терпеливы. У меня есть скрипт, который должен проверить, являются ли определенные элементы формы нулевыми. Если какой-либо из элементов формы имеет значение null, должно отображаться предупреждение. Однако ничего не происходит. Я посмотрел множество примеров, но мне кажется, что я не могу обойти эту проблему.

Рассматриваемый скрипт показан ниже:

var age;
var todaysDate;
var birthDate;
var inputOk;

function setDates() {
    if (d.value !== null && m.value !== null && y.value !== null) {
    inputOk = true;

    var day = d.value;
    var month = m.value + 1;
    var year = y.value;
    var today = new Date();
    var dob = new Date(year, month, day);

    todaysDate = today.valueOf();
    birthDate = dob.valueOf();
}
else {
    inputOk = false;
}   
}

function calculateAge() {

}

function outputAge() {
    //var output = document.getElementById('ageOut');
    //document.write('You are aged: '+age);
}

function getAge() { 
setDates();

if (inputOk) {
    calculateAge();
    outputAge();    
}
else {
    alert("Please enter your D.O.B correctly.");
}  
}

Форма HTML в вопросе показана ниже:

<form name ="dob" id="dobform">
   <select id="d">
 <option value="null">Day</option>
   </select>
   <select id="m">
 <option value="null">Month</option>
   </select>
   <select id="y">
 <option value="null">Year</option>
   </select>
   <input type="button" value="Get my age!" onclick="getAge();"/>
</form>

Answer 1

Значением вашего ввода будет строка "null", а не реальное значение null. Добавьте кавычки вокруг ваших null s.

Кроме того, доступ к входам только через их id является плохой практикой, и я не уверен, что он совместим даже с несколькими браузерами. Используйте функцию document.getElementById, чтобы найти ваши элементы.

Наконец, (если моя память не подведет меня) свойство value элементов select не поддерживается во всех используемых в настоящее время браузерах. Лучше использовать select.options[select.selectedIndex].value.

Answer 2

Доступ к элементам dom напрямую по id - плохая идея.Я полагаю, что это будет работать на некоторых версиях IE, но стандартным способом является вызов document.getElementById("idOfYourControl")

Таким образом, чтобы получить значение вашего "m", выберите:

var mSelect = document.getElementById("m");
mSelect.value;

функция будет выглядеть так:

function setDates() {
    var dSelect = document.getElementById("d");
    var mSelect = document.getElementById("m");
    var ySelect = document.getElementById("y");

    if (dSelect.value !== "null" && mSelect.value !== "null" && ySelect.value !== "null") {
        inputOk = true;

        //and so on
}

Answer 3

У меня есть скрипт, который проверяет, являются ли определенные элементы формы пустыми.

Элементы формы никогда не бывают «нулевыми», хотя элемент, который является элементом управления формой, может не иметь значения (или, точнее, значение может быть пустой строкой), что более или менее эквивалентно «нулю».

В вашем HTML у вас есть:

> <form name ="dob" id="dobform">
>     <select id="d">
>        <option value="null">Day</option>
>    </select>

Обратите внимание, что в HTML 4.01 (текущий стандарт HTML) для значения элемента управления, отправляемого при отправке формы, оно должно иметь имя, поэтому я бы заменил атрибут id атрибутом name и используйте более полезное значение, чем «d» («день» кажется разумным).

Кроме того, в браузерах часто встречается то, что если ни у какого параметра нет атрибута selected , первый параметр становится выбранным (хотя это не требуется стандартом HTML и может не соответствовать действительности для всех браузеры). Таким образом, во многих браузерах значение выбора d всегда будет «нулевым», хотя программно может быть установлено другое значение. Если вы хотите убедиться, что по умолчанию выбран первый параметр, присвойте ему выбранный атрибут:

   <select name="day">
     <option value="null" selected>Day
     <!-- more options -->
   </select>

Рекомендуется обращаться к элементам управления формы как к именованным свойствам формы. Чтобы проверить, выбрал ли пользователь какое-либо значение, отличное от значения по умолчанию, вы можете использовать такой тест (при условии, что select с id = "d" имеет name = "day"):

var form = document.getElementById('dobform');

if (form.day.value == 'null') {
  // the control with name "day" has a value of the string "null"
}

Остальные элементы управления должны обрабатываться таким же образом.