Я работаю над проектом laravel, где я загружаю файлы библиотеки
bootstrap.js
window._ = require('lodash');
window.moment = require('moment');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('sweetalert2/dist/sweetalert2.all.min.js');
require('jquery-validation/dist/jquery.validate.js');
require('jquery-validation/dist/additional-methods.js');
require('jquery-ui-dist/jquery-ui.min.js');
require('datatables.net/js/jquery.dataTables.min.js');
require('datatables.net-bs4/js/dataTables.bootstrap4.min.js');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
app.js
require('./bootstrap');
require('./init');
require('./login');
init.js
jQuery.validator.setDefaults({
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
jQuery Validator работает нормально, но setDefaults не установлен.
package.json
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.8.2",
"animate.css": "^3.7.0",
"axios": "^0.19",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"datatables.net-bs4": "^1.10.19",
"jquery": "^3.4.1",
"jquery-ui-dist": "^1.12.1",
"jquery-validation": "^1.19.0",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"sweetalert2": "^8.11.6",
"vue-template-compiler": "^2.6.10"
}
Примечание: у меня есть другой проект WordPress, где коды работают нормально, а сообщение об ошибке соответствует точно так, как ожидалось.
Я скопировал ответ с
плагин проверки jQuery и Bootstrap 4
Фактический вывод
Ожидаемый результат (из моего другого проекта WordPress)