Question

我正在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 validation plugin and Bootstrap 4

实际输出

预期的输出（来自我的另一个wordpress项目）

jQuery验证集默认值不适用于laravel

0 个答案: