将表单上的javascript验证更改为onblur或onchange而不是提交

Question

我有一个验证php和javascript的表格。

我想将javascript验证更改为实时。 我进行了设置，因此如果用户在单击“提交”按钮后输入正确的信息或不正确的信息，则会添加类和消息。 这是我已经使用了一段时间的验证，并且想更新为实时验证。 我试图将onblur（myFunction）等添加到具有相应功能的输入字段中。 这似乎不起作用。 我是javascript新手。 我意识到该脚本将需要大量修改，但是有人可以向我指出正确的方向。 我意识到有一个jquery插件可以做到这一点，但是我想学习它的发生方式，而不是使用现有代码。

        $(function () {
        $('#contact_form').submit(function(e) {
            e.preventDefault();
            var form = $(this);
            var post_url = form.attr('action');
            var post_data = form.serialize();
            var submit_form = false;

            *validation here*

            if (pcount == 0 && pcount2 == 0 && pcount3 == 0) {
                submit_form = true;
            }

            if (submit_form) {
                $('#loader', form).html('<img src="assets/img/loader.gif" /> Please Wait...');
                $.ajax({
                    type : 'POST',
                    url : post_url,
                    data : post_data,
                    success : function(msg) {
                        $(form).fadeOut(500, function() {
                            form.html(msg).fadeIn();
                        });
                    }
                });
            }
        });

    });

Answer 1

这样做并不难，只需将发送和验证分开，如下所示：

$.fn.validateMyForm = function() {
    var form = $(this);
    /* validation */
    if (pcount == 0 && pcount2 == 0 && pcount3 == 0) {
        return true;
    }
    return false;
}

$(function () {
    $('#contact_form').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        if ($(form).validateMyForm()) {
            /* ajax sending */
        });
    }
});

然后在需要的地方添加对模糊事件的验证：

$("input").blur({
    $('#contact_form').validateMyForm();
});