JSFiddle - React, Tailwind, and code Playground
HTML
<form class="notice__form notice__form--disabled" method="post" enctype="multipart/form-data" action="https://js.dump.academy/keksobooking" autocomplete="off">
<fieldset class="form__element form__element--wide">
<label for="title">Заголовок объявления</label>
<input id="title" name="title" type="text" placeholder="Напиши заголовок" minlength="30" maxlength="100" required>
</fieldset>
<fieldset class="form__element">
<label for="price">Цена за ночь, руб.</label>
<input id="price" name="price" type="number" placeholder="5000" min="0" max="1000000" value="1000" required>
</fieldset>
<fieldset class="form__element form__element--submit">
<button class="form__submit" type="submit">Опубликовать</button>
или <button class="form__reset" type="reset">очистить</button>
</fieldset>
</form>
JavaScript
var titleInput = document.getElementById('title');
var mainForm = document.querySelector('.notice__form');
/* titleInput.style.boxShadow="0 0 4px 2px red";*/
titleInput.addEventListener('invalid', function () {
if (titleInput.validity.tooShort) {
return titleInput.setCustomValidity('Имя должно состоять минимум из 30 символов');
}
if (titleInput.validity.tooLong) {
return titleInput.setCustomValidity('Имя не должно превышать 100 символов');
}
if (titleInput.validity.valueMissing) {
return titleInput.setCustomValidity('Обязательное поле для заполнения');
}
titleInput.setCustomValidity('');
});
// Валидация заголовока объявления
var priceInput = document.getElementById('price');
priceInput.addEventListener('invalid', function () {
if (priceInput.validity.rangeUnderflow) {
return priceInput.setCustomValidity('Минимальное значение этого поля - 0');
}
if (priceInput.validity.rangeOverflow) {
return priceInput.setCustomValidity('Максимальное значение этого поля - 1000000');
}
if (priceInput.validity.valueMissing) {
return priceInput.setCustomValidity('Обязательное поле для заполнения');
}
return priceInput.setCustomValidity('');
});