Question

当用户输入文本框然后选项卡或点击而不输入数据时，有没有办法触发客户端jQuery验证？关于我可以解决这个问题的唯一方法是，当回到服务器并且服务器验证开始时。

环顾四周但却找不到任何东西。

由于

这就是我正在尝试的

$('#firstName input').blur(function () {
        if (!$(this).val()) {
            $(this).addClass('input-validation-error');
        }
    });

也试过这个......没有运气

$(document).ready(function() {
        $('#firstName').keyup(function(event) {
            var input = $(this);
            var message = $(this).val();
            console.log(message);
            if (message) {
                input.removeClass("invalid").addClass("valid");
            } else {
                alert('ERROR');
            }
        });
    });

对于那些可能有这个问题的人来说，这对我有用，而且这是最干净的解决方案

$("input").focusout(function() {                
            if (!$(this).val()) {
                $(this).valid();
            }

        });

Answer 1

这是测试只是替换脚本的路径

<html>
<head>
    <script src="jquery-1.11.0.min.js"></script>
    <title></title>
</head>
<body>
    <p><input type="text" id="textbox" value="" /></p>
    <script>
        $(function () {
            $("#textbox").focusout(function () {
                //do your validation here
             if (this.value == '') {
                alert('you should enter text here');
            }
        });
        });
    </script>
</body>
</html>

Answer 2

尝试使用一些jquery插件，例如JQuery Validation，而不是像这样处理小代码片段。

导入插件后，您的代码应如下所示。

    $("#registration_form").validate({ // your form id
        errorLabelContainer: $("div.register-status"), // your error label div
        wrapper: 'li', //error wrapper
        rules: { //the rules for your dom elements
        first_name: {required: true, minlength: 2},
        last_name: {required: true, minlength: 2}
        },
        messages: { //validation messages
            first_name: {required: "Please enter your first name", minlength: "Your first name is not long enough."},
            last_name: {required: "Please enter your last name", minlength: "Your last name is not long enough."}
        },
        submitHandler: function(form) { //your submit ajax handler
            $.ajax({
                type: "POST",
                url:  registerurl,
                data: $(form).serialize(),
                success:function showResponse(responseText, statusText, xhr, $form)  { 
                    $("div.register-status").hide().fadeIn().html(responseText);    
                    if(responseText=="success"){
                        $("div.register-status").hide().fadeIn().html("Please wait..."); 
                        $("#registration_form").clearForm();
                    }
                },
                error: function showResponse(responseText, statusText, xhr, $form)  { 
                    $("div.register-status").hide().fadeIn().html(responseText); 
                } 
             });            
            return false;
        }
    });

空白字段的客户端验证？

2 个答案: