绑定到表单提交点击jQuery并等待验证面板显示,然后再继续

时间:2011-09-02 14:46:42

标签: jquery events

我正在使用$(“。formSubmitTypes”)挂钩进入提交按钮具有特定类的Html表单提交.live('click',function(){do stuff here});

然而 - 我需要等待各种客户端(jQuery)验证例程运行,因为我需要等待特定的验证摘要在处理任何操作之前变得可见 - 此时,第一次点击将检测到那里没有验证错误,因为在点击之后,显然不会显示各种验证div和spans,因为页面的初始状态没有任何用户输入,因此没有错误。

第二次以及随后的所有时间点击提交按钮,div和跨界然后可见并且日志记录过程有效 - 但这几乎是无用的,因为我需要让它处理初始点击并几乎“等待”在我继续之前发生的其他事情。

有更好的方法吗?我可以绑定到“click”以外的其他东西,我几乎需要一个像“validationFailed”这样的事件来绑定然后执行我需要的函数。

这个想法是捕获已经注入DOM并显示并记录它们的验证消息,只是为了给进程一些上下文。

我目前的代码(有些缩短和缩写):

$(".formSubmitButton").live('click', function () {
    if ($("#validationMessageContainer").is(":visible")) {
        someProcess.Log('Validation Failed', collectionOfValidationFailedMessages);
    }
});

我需要以某种方式扩展它以等待#validationMessageContainer到达DOM,然后捆绑所有的子HTML并在其中记录验证错误。

非常感谢 -SB

1 个答案:

答案 0 :(得分:3)

请记住,只要您的验证不是异步,在记录/提交表单之前等待其结果是一项简单的任务:

$('#yourformid').submit(function() {
    var validation = doFormValidation(); //Assumes it constructs and returns an object that contains: .isValid (bool) and .errors (array of string error messages)
    if(!validation.isValid)
    {
        displayAndLogValidationErrors(validation.errors);  //In here you can have your logic to test to see if the particular error messages have already been logged.  Perhaps construct an object that will contain the logged messages in an array, and just test to see if that array already contains the error message before logging new ones.
    }
    return validation.isValid; //When valid is false, this will stop the form from submitting.
});

我认为,与单​​击按钮相比,您在表单上绑定submit事件会更好。以这种方式停止提交更容易,并且会处理表单被提交的场景,比如按Enter键。