如何在输入更改时显示HTML5验证消息

How to show HTML5 validation messages on input change?

本文关键字：显示 HTML5 验证 消息 输入      更新时间：2023-09-26

我有一个不想提交的表单，因为我改为执行AJAX调用，但我希望在输入为空时显示html5验证消息。

我设法在点击按钮时显示消息，但我真正想要的是在输入更改时显示它。

这项工作：

$('#link').click(function() {
    if (!$('#form')[0].checkValidity()) {
        $('#submit').click();
    }
});

但不是这个：

$('#input').change(function() {
    if (!$('#form')[0].checkValidity()) {
        $('#submit').click();
    }
});

请参阅此处查看实时演示：http://jsfiddle.net/1anyLswt/2/

如果清空字段，然后单击"测试"，则显示消息：OK。

如果清空字段，然后按回车键，则显示消息：OK。

但是，如果您清空该字段，然后单击其他位置，则不会显示消息：KO。

谢谢你的帮助。

尝试我的FIDDLE

$('#input').keyup(function() {
   if (!$('#form')[0].checkValidity()) {
       $('#submit').click();
   }
});

使用jquery.validate

 <script src="js/jquery.validate.js"></script>
 <script src="js/additional-methods.js"></script>
    <script type="text/javascript">
    // When the document is ready
    $(document).ready(function () 
    {
        $("#form").validate({
            rules:
            {
                name: "test",
                test: 
                {
                    required: true,
                    number: true
                }
            },
            messages: 
            {
                test: "Enter Number",
            },
        //perform an AJAX post to ajax.php
        });
        $("#form").submit(function(e)
        {
            var testval = $("#form");
            if( $("#ajaxform").valid())
            {
                    // Do Processing here
            }
        });
    });
    </script>

没有这样的方法（据我所知），你可以用它来检查字段是否为空，要做到这一点，你可以使用方法的组合，也可以使用外部插件

类似的插件是Jquery验证

在引用它并将以下内容添加到您的脚本之后

jQuery.validator.setDefaults({
 debug: true,
 success: "valid"
});
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
alert( "Valid: " + form.valid() );
});

上面的代码验证表单中的整个控件。请参阅这个链接

Jquery验证

相关文章：