سلام
استاد در این جلسه در رابطه موضوع ولیدیشن فرمها صحبت کردند که یک قسمت داره که اگر یک فیلد خالی گذاشته بشه یک پیغام نمایش بده حالا من امدم یک تگ P جای alert اضافه کردم و از طریق display شرط گذاشتم که اگر یک متن داخل فیلد نوشت display اون رو none بکن و این مورد کار میکنه ولی فقط یک بار اگر نوشت و این متن مورد نظر من none شد و مجدد امد متن رو پاک کرد دیگه اون تگ P من نمایش داده نمیشه چطور میتونم این مورد رو برای هر بار که متن هم که پاک میشه تگ P رو مجدد نمایش بدم ؟
کدی که من نوشتم در قسمت :validation NOT empty قرار دارد
<!DOCTYPE html>
<html>
<head>
<title>جاوا اسکریپت</title>
<style>
form {
border: 3px dotted brown;
padding: 10px;
margin: 45px;
}
div {
border: 2px dashed red;
padding: 5px;
}
p {
border: 2px solid gray;
padding: 5px;
}
body {
line-height: 25px;
font-size: 16px;
}
</style>
</head>
<body style="text-align: center;">
<h1>سلام به همه دانشجویان عزیز و برنامهنویسان حرفهای آینده</h1>
<hr />
<form id="firstForm">FORM
<div>DIV
<p>P</p>
</div>
</form>
<form id="test2" name="secondForm">
<p id="error">inpit is empty</p>
<input data-validation="notEmpty" type=" text" name="family">
<select name="list">
<option value="city1">تهران</option>
<option value="city2">اصفهان</option>
<option value="city3">شیراز</option>
</select>
<button type="submit">ذخیره</button>
</form>
<script>
'use strict';
class formValidator2 {
constructor(elems, autofocusElem) {
this.__elems = elems;
this.focusHandler();
autofocusElem.focus();
}
focusHandler() {
this.__elems.addEventListener('focusin', function (event) {
console.log("focusin on :")
console.log(event.target)
})
this.__elems.addEventListener('focusout', (event) => {
console.log("focusout on :")
console.log(event.target)
this[event.target.dataset.validation](event.target);
});
}
// validation NOT empty
notEmpty(elem) {
if (elem.value.length == 0) {
document.getElementById("error").style.display = " "
} else if {
document.getElementById("error").style.display = " none"
}
}
}
new formValidator2(secondForm, secondForm.elements.family);
</script>
</body>
</html>