Заранее извиняюсь за то, что не совсем уверен, как сформулировать этот вопрос в заголовке.
Я новичок в Laravel и развиваюсь в Laravel 6. Я пытаюсь включить проверки как на стороне клиента, так и на стороне сервера в мое приложение, которое по сути является CRUD. Я собираю некоторую информацию от пользователя через формы, проверяю их и затем сохраняю запись в MySQL. Я думаю, что понимаю, как выполнять проверки на стороне сервера, но я борюсь с клиентской стороной. У меня было поверхностное знание jQuery несколько лет go, и я почти все забыл, что, вероятно, объясняет мою нынешнюю путаницу.
Я собрал прототип формы ввода в виде Laravel. Я пытаюсь добавить проверки на стороне клиента и выбрал jQuery проверки, в основном потому, что это я знаю немного за годы go. (Я определенно мог бы предложить сделать это по-другому, если кто-то может предложить лучший подход.) Форма в моем прототипе имеет два простых текстовых поля, поле даты, поле времени и флажок.
Я использую плагин jQuery для отображения даты и времени. Вот документация для этого плагина . Я положил javascript в файл с именем sandbox. js. Остальная часть кода находится в этом представлении, sandbox.blade. php:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="/lib/jquery.datetimepicker.min.css" rel="stylesheet">
<title>Sandbox</title>
</head>
<body>
<div class="container-fluid bg">
<div class="col-sm-12">
<h1>Sleep Form</h1>
<form id="registration-form">
<div class="form-group row">
<label for="name" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input type="text" id="name" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="sleepDate" class="col-4 col-form-label">Sleep Date</label>
<div class="col-2">
<input type="text" id="sleepDate" class="form-control" placeholder="Click to choose date">
</div>
</div>
<div class="form-group row">
<label for="sleepTime" class="col-4 col-form-label">Sleep Time</label>
<div class="col-2">
<input type="text" id="sleepTime" class="form-control" placeholder="Click to choose time">
</div>
</div>
<div class="form-group row">
<label for="minutesAerobic" class="col-4 col-form-label">Minutes of aerobic exercise you took on this day</label>
<div class="col-8">
<input type="text" id="minutesAerobic" class="form-control">
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sunlight">
<label class="form-check-label" for="sunlight">
I got at least two hours of sunlight on this day
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> -->
<script src="https://unpkg.com/@popperjs/core@2.0.0-rc.3"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="lib/jquery.datetimepicker.full.min.js"></script>
<script src="/js/sandbox.js"></script>
</body>
</html>
Когда файл песочницы. js содержит только код для отображения DatePicker и Timepicker, оба отображают только хорошо. Вот как выглядит файл песочницы. js:
$('#sleepDate').datetimepicker({
timepicker: false,
datepicker: true,
format: 'Y-m-d',
defaultDate: new Date(),
weeks: false
})
$('#sleepTime').datetimepicker({
timepicker: true,
datepicker: false,
format: 'H:i',
hours12: false,
step: 15
})
Теперь я пытаюсь добавить проверки для текстового поля. Я также хочу показать любые сообщения об ошибках в строке ниже текстового поля. Вот как выглядит мой исправленный код:
$('#sleepDate').datetimepicker({
timepicker: false,
datepicker: true,
format: 'Y-m-d',
defaultDate: new Date(),
weeks: false
})
$('#sleepTime').datetimepicker({
timepicker: true,
datepicker: false,
format: 'H:i',
hours12: false,
step: 15
})
$("#registration-form").validate({
rules: {
name: {
required: true
},
minutesAerobic: {
required: true
}
},
messages: {
name: {
required: '[JQV] Please supply your name'
},
minutesAerobic: {
required: '[JQV] Please enter the number of minutes of aerobic exercise you did during this day'
}
}
})
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function(element) {
$(element)
.closest('.form-control')
.addClass('has-error');
},
unhighlight: function(element) {
$(element)
.closest('.form-control')
.removeClass('has-error');
}
})
Когда я пытаюсь протестировать этот код, я не вижу признаков того, что новые правки работают, но дата и время по-прежнему отображаются нормально, по крайней мере, у меня нет Я сломал это. Я не получаю никаких сообщений об ошибках, когда оставляю все поля нетронутыми и просто нажимаю Отправить. Я не могу сказать, делает ли моя проверка формы регистрации что-нибудь вообще. Я не уверен, что он находит ошибки, но не может их отобразить или даже не видит ошибки, потому что они не закодированы должным образом. Я также немного обеспокоен тем, что четыре отдельных блока кода просто сидят вместе в песочнице. js file; Интересно, должен ли каждый блок (кроме последнего) заканчиваться точкой с запятой и должны ли все 4 блока быть окружены
$(function() {
});
Я пробовал оба способа, но поведение кода не изменение; кажется, что он сломан в обе стороны.
Я часами искал пример, который сочетает в себе регулярные jQuery проверки данных с примерами выбора даты / времени, которые используют этот плагин, но ничего подобного не видел, так что я действительно не уверен в правильности структура песочницы. js.
Я также хотел бы получить совет о том, как определить, действительно ли работает проверка регистрационной формы. Я пишу свой код на VSCode, и знание того, как отлаживать Laravel в VSCode, было бы очень полезно, но я вполне готов согласиться с более базовыми c методами определения того, какой код фактически выполняется.
Если кто-то может указать мне на реальный пример представления Laravel, выполняющего редактирование формы "create" на стороне клиента, я думаю, это было бы ДЕЙСТВИТЕЛЬНО полезно, особенно если бы он использовал Bootstrap4 и jQuery , Я очень новичок в мире Laravel и просто не знаю, где я мог бы найти такую вещь.