В вашем коде много неправильного.
Давать form a name не неправильно, но это не выгодно.Атрибут name предназначен для полей внутри формы, которые должны представлять свои значения в виде пар name/value.Сам по себе form этого не сделает.Если вы хотите иметь возможность идентифицировать form из JavaScript, вы можете присвоить ему id и использовать .getElementById() или .querySelector() для использования CSSселектор, чтобы найти его.
Как я уже упоминал в комментариях, validate не является допустимым атрибутом HTML.data-validate допустимо (это атрибут data- ), но вы получите доступ к его значению с помощью element.dataset.validate.
Далее функциям обработки событий всегда будет передаваться ссылка на объект события, с которым они работают, рекомендуется установить аргумент для захвата его по имени.Делая это, вам не нужно беспокоиться о возврате true или false из вашей функции, вы можете просто отменить или не отменить событие.
Далее, не используйте встроенные атрибуты события HTML(т.е. onsubmit).Это более чем 20-летняя древняя техника, которую мы использовали до того, как установили стандарты, и, к сожалению, потому что она настолько повсеместна, что просто не умрет быстрой смертью, как должна.Есть много причин не устанавливать события таким образом и вместо этого использовать современные стандарты.
Далее, саморазрушающийся синтаксис <someTag /> является известным синтаксисомкак XHTML.И, не вдаваясь в подробности, это другой синтаксис, который вы не должны принимать. Прочитайте это для полного объяснения.
.getElementsByTagName() возвращает то, что называется "живым" списком узлов, и есть только определенные варианты использования для его использования из-завлияние производительности на код.Вместо этого вы должны использовать .querySelectorAll() для поиска групп элементов.
Наконец, элементы table не должны использоваться для макета страницы.Они должны использоваться только для отображения табличных данных.Для этого есть и причины производительности, и семантические причины.
Честно говоря, ваш инструктор должен знать лучше, чем обучать этим устаревшим и неэффективным методам.И я серьезно имею это в виду, когда говорю, что вы должны обратить на это внимание.Кстати, я более 25 лет работаю корпоративным ИТ-инструктором - я полностью понимаю, как преподавать этот материал.
Теперь, что касается вашей конкретной проблемы.Это действительно сводится к тому, что ваша логика не применяется правильно.Вы проверяете, какое сообщение использовать для пустого поля (на основе значения, хранящегося в атрибуте validate), и устанавливаете это сообщение, но на самом деле вы не добавили никакой логики, чтобы увидеть, действительно ли поле пустое.Эти тесты необходимо скорректировать.
Затем, как только вы узнаете, что в поле есть значение, у вас есть два отдельных оператора if, один для проверки на слишком мало символов, а другой на слишком много.Они должны быть объединены в один оператор if с else if, чтобы охватить обе возможности.
Просто чтобы продолжить мой предыдущий комментарий о обработчиках событий, всегда получающих ссылку на событие, которое они обрабатывают.С формами нам просто нужно по умолчанию предположить, что все в форме корректно.Затем, когда любой из наших проверочных тестов не пройден, мы можем установить «флаг» проверки в значение false, а затем в конце функции, если флаг равен false, мы просто отменяем событие.Если нет, то нам вообще ничего не нужно делать - мы просто позволяем форме отправляться так, как она собиралась, до того, как нас вызовут.
Вот обновленная версия с указанными выше пунктами и переработанной логикой.,Подробности смотрите в комментариях:
// Do all your JavaScript work separately from HTML - - no onXyz!
document.getElementById("f1").addEventListener("submit", validate);
var user = document.getElementById("userName"); // Don't name anything "name"
var nameLocation = document.getElementById("namelocation");
// This is the better way to get all the input elements inside the form, but not the submit button
let fields = document.querySelectorAll("#f1 input:not([type='submit'])");
// Event handling functions will always be passed a reference to the
// event object they are handling, it's good practice to set up an
// argument to capture it by name
function validate(evt) {
nameLocation.textContent = ""; // Reset the status message
var attribute = [];
for (i = 0; i < fields.length; i++) {
attribute.push(fields[i].dataset.validate.split('|'));
}
var emptyName = attribute[0][0];
var userName = user.value.trim(); // trim off any leading or tailing spaces
var nameLength = userName.length;
// Assume the form is valid by default. We only really care when the data is invalid.
var valid = true;
// CHECK NAME
// "empty-allowed" is not even one of the possibilities?
// You need to also be checking to see if the user didn't enter anything. Otherwise,
// what's the point of caring about this scenario?
if (nameLength === 0 && emptyName == "empty-allowd") {
// Don't use .innerHTML when the text you are working with doesn't contain any HTML
// It's wasteful in terms of performance and it can open up security holes. Instead,
// use .textContent.
nameLocation.textContent = "ok";
}
if (nameLength === 0 && emptyName == "empty-not-allowd") {
// There's no need to write another if statement to check for emptyName == 1, when
// this if has already determined that it is.
nameLocation.textContent = "Required.";
valid = false;
}
if (nameLength > 0 && nameLength < attribute[0][1]) {
nameLocation.textContent = "Name not shorter than" + " " + attribute[0][1] + " " + "characters.";
valid = false;
} else if (nameLength > attribute[0][2]) {
nameLocation.textContent = "Name not longer than" + " " + attribute[0][2] + " " + "characters.";
valid = false;
}
// If valid == false, cancel the form's submit event, otherwise don't
!valid ? evt.preventDefault() : null;
}
.error { color:red; }
<!-- Forms shouldn't get a name attribute since they, themselves don't hold any data.
An id is fine to identify it in JavaScript later. Also, don't use inline HTML
event attributes (onsubmit). Do you scripting separately from HTML. -->
<form id="f1" action="" method="/">
<!-- Don't use tables for layout! Also, don't ever name anything "name". "name"
is a property of the Global window object and you will run into trouble
by using it. -->
<div>
Name: <input type="text" id="userName" name="userName" data-validate="empty-not-allowd|5|20">
<!-- Avoid inine styles when possible. Break your CSS out into separate stylesheeets. -->
<span id="namelocation" class="error"></span>
</div>
<div>
<input type="submit" value="register">
</div>
</form>