-1

在 mootool 窗口中，我有树视图（使用花哨的树插件），需要在单击“保存”按钮时进行验证。验证是简单的必填字段（用户需要选择至少一个节点）。我附上了我厌倦的代码。

jQuery(function ($) {   

$("#form2").validate({

    rules: {
        txtUserName: "required",
        SGITree: "required"
        },

    messages: {
        txtUserName: "Please enter first Name",
        SGITree: "Please select your tree node"
        }
    });

});    

//JQuery code for creatingtree 

$("#ADD").live("click", function (e) {
     var url = $(this).attr('href');
$("#dialog-edit").dialog({
    buttons: buttonsConfigSave,
    title: '@Resources.Text.ResourceManager.GetString("_PopUpAdd")',
    autoOpen: false,
    resizable: true,
    height: 600,
    width: 700,
    cache: false,

    show: { effect: 'drop', direction: "up" },
    modal: true,
    draggable: true,
    open: function (event, ui) {
        $('#txtname').val('');
        $('select[name="TipoSGITree"] option:selected').attr("selected", null);
        var nodeTree1 = $("#tree1").fancytree("getActiveNode");
        if (nodeTree1 != null)
        {                     
            $("#tree1").fancytree("getTree").getNodeByKey(nodeTree1.key).setActive(false);
                 $("#tree1").fancytree("getTree").getNodeByKey(nodeTree1.key).setFocus(false);                                            
        }
        var nodeTree2 = $("#tree2").fancytree("getActiveNode");                  
        if (nodeTree2 != null) {
            alert(nodeTree2.key);

       $("#tree2").fancytree("getTree").getNodeByKey(nodeTree2.key).setActive(false);

       $("#tree2").fancytree("getTree").getNodeByKey(nodeTree2.key).setFocus(false);
        }                  
        $(this).load(url);
        },
        close: function (event, ui) {
        $(this).dialog('close');
    }
});
$("#dialog-edit").dialog('open');
return false;
});

树如下所示

流程1 子流程1.1 子流程1.2 子流程1.1.1 子流程2 子流程2.1 子流程3 子流程3.1 子流程3.2 子流程3.3 子流程3.4 子流程3 .4.1 子流程5

必填字段适用于文本框，但不适用于树。任何形式的帮助都深表感谢。提前致谢。

4

2 回答 2

0

I got the bottom of the issue, basically i have 1 fancy tree (say M1) in my main page and 2 fancy tree in dialog window(say DW1 & DW2). i was trying to validate the node seleceted from the DW1 but fancy tree seems to be hold the properity of fancy tree M1. Not only validation when i try to use keyboard events like 'backspace, left/right/top/bottom arrow keys' in filter the fancy tree DW1 or DW2, the fancy tree fired the event for tree M1. As a simple solution i added keyboard: false, // Support keyboard navigation properity to M1 fancy tree.

于 2014-09-17T10:51:11.540 回答
0

根据 OP 的更新编辑

最重要的是，这是无法做到的。建议的粗略解决方法是唯一可行的方法，这取决于一些事情。

引用 OP： “必填字段适用于文本框，但不适用于树。”

您无法验证树节点。jQuery Validate 只能验证容器内的select,textarea和input(各种类型) 元素。<form></form>

数据验证意味着用户需要在提交表单之前以特定格式输入数据。既然一棵树与数据输入无关，那么如何验证它呢？你想达到什么目的？

查看官方 FancyTree 演示后，我只能假设您想要验证树中的radio和checkbox项目，如演示的“嵌入表单”部分所示。

查看相关的源代码，我们只有这个......

<fieldset>
    <legend>Select 1</legend>
    <div id="tree" name="selNodes"></div>
</fieldset>
<fieldset>
    <legend>Select 2</legend>
    <div id="tree2" name="selNodes2"></div>
</fieldset>

如您所见，没有select,textarea或input元素供您验证。

因此，让我们检查 DOM 以查看 FancyTree 插件创建了哪些元素。这里要发布的标记太多了，但是 FancyTree 会动态创建大量嵌套<ul>列表，其中包含样式化和嵌套<span></span>元素。 动态创建的 FancyTree 标记中绝对没有select或元素。textareainput

rules此外，在 的选项内声明规则时，单个输入字段（或）.validate()的属性是目标。你不能只是放在那里并期望插件通过树解析寻找它应该成为“必需”的东西。这是一个有争议的问题，因为树中无论如何都没有有效的输入元素。nameselecttextareainputSGITree

粗略的解决方法建议：

1) 创建一个自定义的 jQuery 事件触发器，它以某种方式捕获 FancyTree复选框/收音机的状态。 尽管我不完全确定您将如何执行此操作，因为复选框/收音机仅由span元素和 CSS 构成。 也许 FancyTree 已经为此提供了内置方法？

2) 每当 FancyTree复选框/收音机的状态发生变化时，将该信息复制到input type="hidden"也包含在您的form.

3）确保input type="hidden"元素包含一个唯一的name，并简单地将其用作您的验证目标。

4) 您必须使用各种 jQuery Validate 回调函数，例如errorPlacement为了将验证消息放置在所需的位置。

于 2014-08-12T14:22:51.217 回答