Question

我想在单击提交按钮时显示自定义消息，并且需要覆盖HTML5默认消息。我已经编写了以下代码。

我在文本框中使用以下代码，它可以正常工作，但相同的代码在文件上传输入框中不起作用

文件输入控件的行为不同。第一次提交按钮时，没有错误消息显示，但是第二次单击时，它显示了自定义消息。

我不明白为什么它第一次不显示自定义错误消息。

请帮助我。谢谢。

样本HTML：

<input type='text' class='common' required='true' title="custom message" value='' onkeyup = "this.setCustomValidity('');"/>

<input type='file' id="f1" required='true' title="custom message2"  class='common' onkeyup = "this.setCustomValidity('');" onchange="validate_fileupload(this);" />

<input type='file' id="f2"  required='true' title="custom message3"  class='common' onkeyup = "this.setCustomValidity('');" onchange="validate_fileupload(this);" />

JavaScript / jQuery代码：

<script type="text/javascript">



    $('.common').on('invalid', function () {
        var textfield = $(this).get(0);


        if (textfield.value == "") {
            textfield.setCustomValidity('@Resources.Content.MF');
        } else {
            textfield.setCustomValidity('');
        }

    });


    </script>

Answer 1

确保您使用...封装了jQuery。

$(document).ready(function() { 
    // Your code
});

在将事件连接到DOM之前，确保DOM已加载。

我不确定这是否可以解决您的问题，如果您说第二次尝试可以解决问题，我觉得没有足够的信息可以提供更多帮助。

要进一步调试问题，请在代码中添加其余的函数依赖项，或在该console.log()侦听器中放置一些debuggers;或invalid来查看发生的情况。

Answer 2

我已经这样做了。我在此功能中使用了 setCustomValidity 而不是键盘输入，它可以按预期工作

  function validate_fileupload(file) {

        file.setCustomValidity('');

}

文件输入自定义消息HTML5覆盖问题

2 个答案: