Date.style не определено, но не понимаю, почему

Question

Date.style не определено, но не понимаю, почему

0

JavaScript-новичок здесь, пытаясь понять, почему первая проверка в следующем коде не работает. Я получаю, что Date.style не определен, но это всего лишь копия кода, который я использую в других полях, и отлично работает во всех них, кроме validationDate(ymd).

function validateDate(ymd) {
    var ymd = document.getElementById('Date').value;
    var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

    if (ymd.length == 0) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date can\'t be empty";
        return false;
    } else if (!legalEntry.test(ymd)) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
        return false;
    } else {
        Date.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
    }
}

    <tr><td>Date (YYYY-MM-DD)*</td>
    <td><input type="text" onblur="validateDate()" name="Date" id="Date" size="10" maxlength="10"/></td>

благодаря

В качестве запроса здесь приведен полный код, который работает для других полей:

function validateForm() {
    return (validateRunnerId
        && validateEventId
        && validateDate
        && validateTime
        && validatePosition
        && validateCategoryId
        && validateAge
        && validatePB);
}


function validateRunnerId(ID) {
    var ID = document.getElementById('RunnerId').value;
    var legalEntry = /^\d{1,5}?$/;

    if (ID.length == 0) {
        RunnerId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The RunnerId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        RunnerId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The RunnerId must be a number from 1 to 99999";
        return false;
        }

    else {
        RunnerId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateEventId(ID) {
    var ID = document.getElementById('EventId').value;
    var legalEntry = /^\d{1,5}?$/;

    if (ID.length == 0) {
        EventId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The EventId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        EventId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The EventId must be a number from 1 to 99999";
        return false;
        }

    else {
        EventId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateDate(date) {
    var date = document.getElementById('Date').value;
    var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

    if (date.length == 0) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(date)) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
        return false;
        }

    else {
        Date.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateTime(time) {
    var time = document.getElementById('Time').value;
    var legalEntry = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$;/

    if (time.length == 0) {
        Time.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The finish time can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(time)) {
        Time.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The finish time must be in format HH:MM:SS";
        return false;
        }

    else {
        Time.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validatePosition(position) {
    var position = document.getElementById('Position').value;
    var legalEntry = /^\d{1,5}?$/

    if (position.length == 0) {
        Position.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The position can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(position)) {
        Position.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The position must be a number from 1 to 99999";
        return false;
        }

    else {
        Position.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateCategoryId(ID) {
    var ID = document.getElementById('CategoryId').value;
    var legalEntry = /^\d\d?[0]?$/;

    if (ID.length == 0) {
        CategoryId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The CategoryId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        CategoryId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The CategoryId must be a number from 1 to 100";
        return false;
        }

    else {
        RunnerId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateAge(age) {
    var age = document.getElementById('Age').value;
    var legalEntry = /^\d\d?\,?\d?\d?$/;

    if (age.length == 0) {
        Age.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The age grade can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(age)) {
        Age.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The age grade must be decimal number of maximum 2 integers and 2 decimals";
        return false;
        }

    else {
        Age.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validatePB(pb) {
    var pb = document.getElementById('PB').value;
    var legalEntry = /^(0|1)$/;

    if (pb.length == 0) {
        pb.value = "0";
    }

    else if (!legalEntry.test(pb)) {
        PB.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The PB can only be 0 for false and 1 for true";
        return false;
        }

    else {
        PB.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

Joy Adamson 05 янв. 2014, в 14:26

Источник

0

С какой стати вы пытаетесь назначить конструктор Date (если вы его не переопределили)? Если вы изменили его, вы могли бы показать соответствующий код?
Qantas 94 Heavy 05 янв. 2014, в 12:58
0

как указано выше, я новичок в этом. Мой код работает для других полей. Вот остальная часть этого:
Joy Adamson 05 янв. 2014, в 13:01
1

JavaScript чувствителен к регистру. Ваша переменная date и Date не являются одним и тем же объектом.
nnnnnn 05 янв. 2014, в 13:02
0

Я знаю, одна переменная, другая id объекта id в форме HTML ...
Joy Adamson 05 янв. 2014, в 13:03
1

Нет, у вас есть Date.style.background везде, и это должен быть date.style.background . В JS Date с большой буквы D является конструктором для объектов Date . (Некоторые браузеры позволяют использовать идентификатор элемента, как если бы он был переменной в вашем JS, но это не очень хорошая практика.)
nnnnnn 05 янв. 2014, в 13:04
0

изменение его на date.stlye.background не меняет поведение ....
Joy Adamson 05 янв. 2014, в 13:06
0

спасибо @nnnnnn. Я не знал, что! :)
Joy Adamson 05 янв. 2014, в 13:11
0

хорошо, изменение имени переменной все еще не помогает ... Я обновил код
Joy Adamson 05 янв. 2014, в 13:16
1

@nnnnnn наконец-то понял, что вы имели в виду ... Мне пришлось изменить имя, указанное как id, в поле html. Еще раз спасибо!
Joy Adamson 05 янв. 2014, в 13:21

Показать ещё 7 комментариев

Теги:

javascript

html

validation

1 ответ

Ещё вопросы

С какой стати вы пытаетесь назначить конструктор Date (если вы его не переопределили)? Если вы изменили его, вы могли бы показать соответствующий код?
как указано выше, я новичок в этом. Мой код работает для других полей. Вот остальная часть этого:
JavaScript чувствителен к регистру. Ваша переменная date и Date не являются одним и тем же объектом.
Я знаю, одна переменная, другая id объекта id в форме HTML ...
Нет, у вас есть Date.style.background везде, и это должен быть date.style.background . В JS Date с большой буквы D является конструктором для объектов Date . (Некоторые браузеры позволяют использовать идентификатор элемента, как если бы он был переменной в вашем JS, но это не очень хорошая практика.)
изменение его на date.stlye.background не меняет поведение ....
хорошо, изменение имени переменной все еще не помогает ... Я обновил код
@nnnnnn наконец-то понял, что вы имели в виду ... Мне пришлось изменить имя, указанное как id, в поле html. Еще раз спасибо!

Brian Nickel · Answer 1 · 2014-01-05T12-14-00.000Z

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

<div id="foo"></div>
<script>
    foo.innerHTML = 'Hi!';
</script>

Проблема, с которой вы сталкиваетесь, заключается в том, что внутренняя логика выглядит примерно так:

<div id="foo">
    <script INTERNAL>
        if (window.foo == undefined) {
            window.foo = document.getElementById('foo');
        }
    </script>
</div>
<script>
    foo.innerHTML = 'Hi!';
</script>

Переменная присваивается только тогда, когда она еще не существует. Ваша переменная Date никогда не записывается, потому что window.Date - это уже существующая функция.

Вы можете увидеть это в действии на этой скрипке: http://jsfiddle.net/8fjkc/2/ Если у меня есть элементы с именем Date, с тем же именем, что и пользовательская переменная, и с неиспользуемым именем, только переменная с неиспользуемым именем сопоставляется с переменной.

Самое простое решение - переименовать свой элемент "Дата" на что-то еще, например "DateField", но вы видели, что это очень хрупкое. Лучшим решением является определение переменной с помощью document.getElementById. Вы даже можете определить его как Date внутри области функций, не нарушая ничего внешнего:

function validateDate(date) {
    var Date = document.getElementById('Date');
    ...
}

var foobar = new Date(); // <-- still works.