如何更改WPForms默认验证消息？

Question

我不擅长Javascript和搜索论坛，但找不到答案。我有一个WordPress站点，并使用WPForms插件。我的表单中有一个number type输入。我想验证输入中的最大11个字符号条目。我搜索了WPForms文档并找到了该代码并将其插入模板的function.php文件中：

function wpf_vergi_no() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.wpf-vergi-no input').attr({'min':1000000000, 'max':9999999999}); // Define number limits
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_vergi_no', 9999999999 );

验证消息

它正在工作，并显示了一条验证消息，但我想定制该消息。有人能帮我吗？

谢谢:)

Answer 1

您可以使用wpformsReady和$.validator重写消息，检查下面的代码。

function wpf_custom_validation_messages(){
    ?>
    <script type="text/javascript">
        (function($) {
            var WPF_Custom_Validation = {
                /**
                 * Start the engine.
                 *
                 * @since 1.0.0
                 */
                init: function() {
                    $( document ).on( 'wpformsReady', WPF_Custom_Validation.customMessages );
                },

                /**
                 * Custom validation rules.
                 *
                 * @since 1.0.0
                 */
                customMessages: function() {

                    // Only load if jQuery validation library exists
                    if (typeof $.fn.validate !== 'undefined') { 
                        $.validator.messages.min = 'Custom message for min.';
                        $.validator.messages.max = 'Custom message for max.';
                    }

                },
            }
            WPF_Custom_Validation.init();
        })(jQuery);
    </script>
    <?php
}

add_action( 'wp_footer', 'wpf_custom_validation_messages', 10, 1 );

这里是默认消息的列表.

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
    step: $.validator.format( "Please enter a multiple of {0}." )
}

测试和工作。

​

​

Answer 2

要更改默认的HTML5验证警告，可以在invalid事件中使用setCustomValidity()，如下所示：

​

$('.wpf-vergi-no input').prop({
  min: 1000000000,
  max: 9999999999
}).on('invalid', e => {
  let input = e.target;
  input.setCustomValidity("");
  if (!input.validity.valid) {
    input.setCustomValidity("Your custom message here");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="wpf-vergi-no">
  <input type="number" value="0" />
  <button type="submit">Submit</button>
</form>

​