当前位置：文江博客话题详情

实时验证 + UI 选项卡 - 一页具有多个验证

发布于 2024-10-17 12:05:43 字数 996 浏览 3 评论 0原文

我在大多数项目中使用 livevalidation.com 的 LiveValidation 进行一些简单和更复杂的表单验证。

主要是为了提高用户的有效期。

我做了什么。 - 将无效消息从文本替换为图像 - 提交表单时 - 并且无效 - 关注第一个无效的输入字段 - 提交表单时 - 并且无效 - 向所有无效字段添加红色边框

我想要做什么： - 创建验证表单的函数 - 但仅在当前选项卡上

我们如何“手动”做到这一点 - 我们可以创建另一个 varautomaticOnSubmit2 = field4.form.onsubmit;

其中 field4 始终是当前选项卡上的第一个输入。因为我的选项卡将生成未知数量的选项卡 - 我正在寻找更通用的解决方案。

我做了一些尝试 - 但我对 js/jquery 的了解很差 - 所以我失败了。

//尝试 1

$(".ui-tabs-panel:not(.ui-tabs-hide) > form")

这是正确的 - firebug 只能找到 1 - 打开/当前选项卡 - 我们想要验证的表单所在的位置

$(".ui-tabs-selected").ready(function() {
var 自动OnSubmit = $(".ui-tabs-panel:not(.ui-tabs-hide) > 表单").submit;
 $(".ui-tabs-panel:not(.ui-tabs-hide) > 表单").submit = function(){
    var valid = 自动OnSubmit();
    if(valid)alert('表单有效！');
    别的{ 
        $(".LV_invalid_field:first", document.forms).focus();
        }
    返回错误
}

});

最好的问候，

彼得

原文

I'm using LiveValidation of livevalidation.com for some simple and more complicated form validation on most of my projects.

Mostly to enhance user expirence.

What I did.
- replace invalid message from text to image
- when form is submited - and is not valid - focus on first not valid input field
- when form is submited - and is not valid - add red border to all not valid fields

What I'm trying to do:
- create function which be validating form - but for only on current tab

How can we do that 'manualy'
- We could create another var automaticOnSubmit2 = field4.form.onsubmit;

Where field4 is always first input on current tab.
Because my tabs would be generated with unknown number of tabs - I'm looking for more universal solution.

I did some attempts - but my knowledge of js/jquery is very poor - so I failed.

//attempt 1

$(".ui-tabs-panel:not(.ui-tabs-hide) > form")

that is correct - firebug can found only 1 - open/current tab - where form which we wants to validate is located

$(".ui-tabs-selected").ready(function() {
var automaticOnSubmit = $(".ui-tabs-panel:not(.ui-tabs-hide) > form").submit;
 $(".ui-tabs-panel:not(.ui-tabs-hide) > form").submit = function(){
    var valid = automaticOnSubmit();
    if(valid)alert('Form is Valid!');
    else{ 
        $(".LV_invalid_field:first", document.forms).focus();
        }
    return false
}

});

Best Regards,

Peter

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹梦 2024-10-24 12:05:43

在线演示1< br>
在线演示2

< strong>同时压缩

Livevalidation + jQuery UI 选项卡
解决方案：

$("form").each(function (i) {
    var automaticOnSubmit = this.onsubmit;
    this.onsubmit = function(){
        var valid = automaticOnSubmit();
        if(valid)alert('Form is Valid!');
        else{ 
            $(".LV_invalid_field:first", document.getElementById(this.id)).focus();
        }
        return false
    }
});

Online demo 1
Online demo 2

Zip with both

Livevalidation + jQuery UI Tabs
Solution:

$("form").each(function (i) {
    var automaticOnSubmit = this.onsubmit;
    this.onsubmit = function(){
        var valid = automaticOnSubmit();
        if(valid)alert('Form is Valid!');
        else{ 
            $(".LV_invalid_field:first", document.getElementById(this.id)).focus();
        }
        return false
    }
});

回复收藏 0 原文

~没有更多了~