Возвращаемое значение проверки формы JS

Привет, Чтобы избежать отправки формы, функция JavaScript (см. ниже) должна возвращать false. Почему это не работает так? (см. ниже) Возвращаемое значение должно быть помещено в анонимную функцию. Спасибо!

  document.getElementById("myform").onsubmit = function() {

validate();

};

function validate () {

var element = document.getElementById("error_div");

element.classList.toggle("error_message");

return false;

}

Код (JavaScript):

Та же проблема, нет возвращаемого значения:

  document.getElementById('myform').addEventListener('submit', validate, false);


function validate(event) {


/* var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; */


var rootEmail = document.getElementById("email").value;


var rootSubject = document.getElementById("subject").value;


var rootMessage = document.getElementById("message").value;


var errorDiv = document.getElementById("error_div");


var fieldsMissing = "";


console.log(errorDiv);


if(rootEmail == "") { 


fieldsMissing += "Please enter an email address<br/>";


}


if(rootSubject == "") {


fieldsMissing += "Please enter a Subject<br/>"; 


}


if(rootMessage == "") { 


fieldsMissing += "Please enter your message<br/>";


} 


if(fieldsMissing != ""){ 


console.log(errorDiv.style.display); 


errorDiv.style.display = "block";


errorDiv.innerHTML = fieldsMissing; 


return false; 


}


else { 


return true; 


} 


}

Код (JavaScript):

Было бы, если бы ЧТО-ТО из этого было НИЧЕГО, относящимся к сфере деятельности JavaScript.

Что опять же не так. Да, и еще кое-что.

если этот DIV#error_div существует только для использования в сценариях, его вообще не должно быть в разметке.

Создайте его в DOM из сценария, чтобы в сценарии не было бессмысленных/возможно запутанных элементов.

Если у вас есть что-то, что работает только при наличии скриптов, ему НЕ место в разметке!

Я планирую иметь темный режим моего текущего развития. Считаете ли вы хорошей идеей изменить таким образом фон, классы связанных элементов или полностью перейти на новую таблицу стилей? Я не знаю, как люди, скажем, Google, это делают.

И это единственный момент, в котором я хочу участвовать в этой теме. Спасибо,

Это стиль, он вписывается в вашу таблицу стилей.

Если у вас всего этого достаточно, и размер становится проблемой, значит, у вас слишком много стиля. хотя с этим мы вступаем на территорию тредджеков.

но, тем не менее, ФП может извлечь уроки из этих методологий.

Проще говоря, более 80% того, что люди до сих пор делают на стороне клиента с помощью JavaScript, больше не является работой JS.

Опять же, вы не возвращаете true/false при присоединении из JavaScript.

 
<input type="email" name="email" id="contact_email" required>

Код (разметка): вам даже не понадобится else/return true.

Это поведение по умолчанию.

  /* use SIF/IIFE so that we can shortcut the word "document" and to isolate scope so that we're invisible to other scripts.



Also gives us a namespace in which we can pre-store values speeding up execution.






*/ (function(d) { /* static store variables outside the loop so the "longer" getBy operations aren't called at check time */ /* if you've got a bunch of var, comma delimit don't waste time saying "var" on each and every blasted one! */ var rootEmail = d.getElementById("email"), rootSubject = d.getElementById("subject"), rootMessage = d.getElementById("message"), errorDiv = d.getElementById("error_div"), errorCount ; // DOM flush is faster in most cases than innerHTML='' function flush(element) { while (element.firstChild) element.removeChild(element.firstChild); } // do this on the DOM! WAY faster than innerHTML and no security risks.







function writeError(txt) { errorCount++; errorDiv.appendChild(d.createTextNode(txt)); errorDiv.appendChild(d.createElement('br')); } // writeError function validate(event) { flush(errorDiv); errorCount = 0; if (rootEmail.value == '') writeError('Please enter an email address'); if(rootSubject.value == '') writeError('Please enter a Subject'); if(rootMessage == '') writeError('Please enter your message'); if (errorCount) { console.log(errorDiv.style.display); errorDiv.style.display = "block"; event.preventDefault(); } } // validate // hook our check LAST d.getElementById('myform').addEventListener('submit', validate, false); })(document); 

Код (разметка): Примерно так бы я подошел к этому, ЕСЛИ бы я использовал для этого JavaScript.

НО

ЭТИ ПРОВЕРКИ НЕ ЯВЛЯЮТСЯ ДЕЛОМ JAVASCRIPT!!! Есть ли причина, по которой вы не просто добавляете атрибут «required» в разметку, а вместо этого добавляете сценарии, как будто это все еще 2009 год? Серьезно, НИЧЕГО из того, что вы показали или сделали до сих пор, не гарантирует использование или даже присутствие JavaScript.

Мне нужно было бы увидеть рассматриваемую форму, но, например, если вы хотите, чтобы поле электронной почты было действительным и обязательным, просто:

  if(fieldsMissing != ""){ console.log(errorDiv.style.display); errorDiv.style.display = "block"; // you probably shouldn't be doing that errorDiv.innerHTML = fieldsMissing; // you REALLY shouldn't be using innerHTML event.preventDefault(); } 

Код (разметка): поскольку тип электронной почты позволяет пользователю вводить только действительные адреса электронной почты, а обязательное поле означает, что оно не может быть пустым.

В любом «современном» браузере и/или IE9/новее он выполнит эти проверки за вас.

НЕ ТРЕБУЕТСЯ СЦЕНАРИЙ.

Проверка форм уже десять лет не входит в сферу деятельности JavaScript, если только вы не выполняете какую-то необычную/нестандартную проверку.

Да, event.preventDefault() предотвращает отправку.

Вот что делает этот метод EVENT.

"event.preventDefault();" останавливает поведение события по умолчанию из... событий.

Таким образом, если событие было «отправкой», предотвращение поведения отправки по умолчанию предотвращает.

отправку.

Проще не бывает. Только если вы не предотвратите это, оно подчинится.

Подход с возвращаемым значением работает только тогда, когда вы говорите «onsubmit» в MARKUP, как будто сейчас 1997 год.

Когда вы используете столь же устаревший Element.onsubmit, он ведет себя более похоже на современный Element.addEventListener, где вам нужно сказать «event.precentDefault();» чтобы остановить это.

Вам следует использовать addEventListener, а не onsubmit, если другие сценарии захотят перехватить элемент.

Как правило, утверждение onsubmit в разметке или JavaScript — это устаревшая практика, которую мы ДОЛЖНЫ были прекратить использовать более двух десятилетий назад. Вы также создаете анонимную функцию НИЧЕГО.

 document.getElementById('myform').addEventListener('submit', validate, false);

function validate(event) {
var element = document.getElementById('error_div');
element.classList.toggle('error_message');
event.preventDefault();
}

Код (разметка). Обратите внимание, что приведенный выше код написан для IE9/новее и всех современных браузеров.

Если вам требуется поддержка IE8/более ранних версий.

что ж.

НЕТ того, что JavaScript больше не должен использоваться для проверки теперь, когда у нас есть атрибуты HTML 5. Такая ерунда должна была последовать примеру дронта лет семь-восемь назад.

Также помните, что проверке на стороне клиента НЕЛЬЗЯ доверять, поэтому убедитесь, что ваш серверный код тоже все проверяет.

Я бы сделал это так:

 


var doc = document


, myForm = doc.getElementById('myform')


, email = doc.getElementById("email")


, subject = doc.getElementById("subject")


, message = doc.getElementById("message")


, errDiv = doc.getElementById("error_div")


, mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;


myForm.addEventListener('submit', function(event) {


event.preventDefault();


// client side validation


if (email.value) {


if(email.value.match(mailformat)) {


return true;


} else {


errDiv.insertAdjacentHTML('beforeend', 'Please enter a valid email address<br/>');


return false;


}


}


if (!subject.value) {


errDiv.insertAdjacentHTML('beforeend', 'Please enter a Subject<br/>');


return false;


}


if (!message.value) {


errDiv.insertAdjacentHTML('beforeend', 'Please enter your message<br/>');


return false;


}


submitData();


}, false);

Код (разметка): чище, код легче понять, его легче поддерживать тому, кто работает после вас.

Что теперь? Не знаком с этой функцией, и она точно не имеет ничего общего с ванильными сценариями.

Вы имели в виду myForm.subnit(), который снова запускал бы эту функцию в бесконечном цикле? Извини, друг мой, но /проваливается/ тяжело.

Достаточно плохо иметь JS просто так, не погружаясь с головой в еще худшие практики, чем его исходный код.

Ни при каких обстоятельствах представленный вами код никогда не будет отправлен!