jQuery 验证插件在 WordPress 中不起作用

Question

我希望实现 jQuery 验证插件来验证 WordPress 中的自定义表单，但验证不起作用，尽管存在错误，但表单仍被提交。

这是我正确的做法:

1. jQuery 已在顶部正确调用。
2. 验证插件位于页脚中并且也被正确调用。
3. HTML 表单元素一切正常，我已经对所有“名称”值进行了三次检查。

验证脚本是我认为问题所在的地方:

<script type="text/javascript">
    jQuery(document).ready(function($) {

        $('#wpcf7_298').validate({
            rules: {
                wordsno: {
                    required: true,
                    digits: true
                },

                dynamictext-419: {
                    required: true,
                    email: true
                },

                select-box: {
                    required: true,

                }
            },

            messages: {
                wordsno: "Please fill the field",
                dynamictext-419: "Please enter a valid email address.",
                select-box: "Please choose your order type."
            }
        })          

        $('#sbbutton').click(function() {
        $("#wpcf7_298").valid();});

        });

</script>

Answer 1

您验证方法的 key 错误

jQuery(document).ready(function($) {

    $('#wpcf7_298').validate({
        rules: {
            wordsno: {
                required: true,
                digits: true
            },

            'dynamictext-419': {
                required: true,
                email: true
            },

            'select-box': {
                required: true,

            }
        },

        messages: {
            wordsno: "Please fill the field",
            'dynamictext-419': "Please enter a valid email address.",
            'select-box': "Please choose your order type."
        }
    }) 

在对象中，具有非字母数字值(例如 -)的键必须括在单/双引号内。