Question

我有一个我不想提交的表单，因为我做了一个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/

如果您清空该字段然后单击“测试”，则会显示以下消息：确定。

如果您清空该字段然后按回车键，则会显示以下消息：确定。

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

感谢您的帮助。

Answer 1

试试我的FIDDLE

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

Answer 2

使用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>

Answer 3

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

类似的插件是Jquery验证

在引用它并在脚本中添加以下内容后

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

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

Jquery Validation

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

3 个答案: