У меня есть поле ввода даты в форме, которая дает дату рождения от пользователя. Я создал проверку бэкэнд, которая проверяет, что дата рождения, введенная пользователем, превышает 18 лет, необходимо реализовать это на интерфейсе, используя некоторый Javascript или Jquery, о котором я понятия не имею, как с этим справиться.
Поле ввода, содержащее дату рождения
<div class="form-line registar love {{ $errors->has('dob') ? ' has-error' : '' }}">
<input type="date" class="form-input" name="dob" value="{{ old('dob') }}" required>
<label>Date of Birth *</label>
<div class="error-label">Field is required!</div>
<div class="check-label"></div>
@if ($errors->has('dob'))
<span class="help-block">
<strong>{{ $errors->first('dob') }}</strong>
</span>
@endif
</div>
function validateForm(event) {
// Store value of date of birth field
let dateOfBirthFieldValue = document.getElementById("dob").value;
let bday = new Date(dateOfBirthFieldValue);
let todayDate = new Date();
let timeDiff = Math.abs(todayDate.getTime() - bday.getTime());
let diffyears = Math.ceil(timeDiff / (1000 * 3600 * 24)/365);
return diffyears > 18; // or you can change value according to your requirement
}
Возможно, вы могли бы использовать прослушиватель событий onSubmit, чтобы сначала прослушать представленную форму:
document.getElementById("my-form").addEventListener('submit', validateForm);
function validateForm(event) {
// Store value of date of birth field
let dateOfBirthFieldValue = document.getElementById("dob").value;
// Boolean to store the status of the validation
let isValid = false;
// some validation logic (as per backend), set isValid to true if dob is valid
// if isValid is false, the form will not submit
return isValid;
}
Вы также можете добавить некоторую логику в функцию для обновления соответствующей метки формы, чтобы включить информацию об ошибке. Должно быть довольно просто с jQuery. Вот еще одно чтение.