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

时间:2013-03-15 22:36:18

标签: javascript jquery html forms validation

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

我想将javascript验证更改为实时。我有它设置所以如果用户在单击提交按钮后输入正确的信息或不正确的信息,则会添加类和消息。这是我已经使用了一段时间的验证,并希望更新为实时验证。我试图使用相应的函数将onblur(myFunction)等添加到输入字段。这似乎不起作用。我是一个javascript noob。我意识到剧本需要进行相当多的改革,但是有人能指出我正确的方向。我意识到有一个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();
                        });
                    }
                });
            }
        });

    });

1 个答案:

答案 0 :(得分:0)

要做到这一点并不困难,只需将发送和验证分开即可:

$.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();
});