Dojo / Dijit:动态选择输入所需属性

时间:2010-11-19 20:38:23

标签: javascript validation dojo

我试图使用dojo和dijit小部件组合一个相当复杂的表单。表单有多个“部分”,允许用户附加现有对象(通过选择标记)或在表单中内联创建一个全新的对象。

我的输入是基于条件的单选按钮呈现并通过javascript操作。我遇到的问题是有条件地根据输入是否被渲染而需要dijit小部件(这本身取决于选择了哪个单选按钮。

我的HTML(实际上是jsp)

<div>
    <input id="useExisting" type="radio" name="radio"  checked value="useExisting" onclick="renderExistingInput()" /> <label for="useExisting">Use Existing</label>
    <input id="new" type="radio" name="radio" value="new" onclick="renderNewInputs()"/> <label for="new">Create New</label>
</div>    
<br>
<div id="newInputs">
    <div class="row">
        <label class="label"  for="newName">Name </label>
        <span class="formInput"><input type="text" id="newName" name="newName" required="true" dojoType="dijit.form.ValidationTextBox"/></span>
    </div>
    <!-- More inputs with required="true"-->

    <br>
</div>
<div id="existingInput>
    <div class="row">
        <label class="label" for="existingSelect">Existing Object </label>
        <span class="formInput"> 
            <select name="existingSelect" id="existingSelect" dojoType="dijit.form.Select">
                <!--JSTL tags for compiling list of options --> 
            </select>
        </span>
    </div>
</div>

伴随javascript函数:

function renderExistingInput() {

    dojo.fx.wipeOut(getWipeArguments('newInputs')).play();
    dojo.fx.wipeIn(getWipeArguments('existingInput')).play();
}

function renderNewInputs() {
    dojo.fx.wipeOut(getWipeArguments('existingInput')).play();
    dojo.fx.wipeIn(getWipeArguments('newInputs')).play();

}

function getWipeArguments(id) {
    var wipeArgs = {
        node : id
    };
    return wipeArgs;
}

用户互动的基本“流程”是用户点击一个单选按钮,正确的div渲染就是这样。我想要的是那些未被视为不需要的输入。我不完全确定如何做到这一点。是否可以通过dojo直接操作该特定属性?或者有更好的方法完全做到这一点吗?

1 个答案:

答案 0 :(得分:1)

似乎我的回答是正确地盯着我。我只需要将我遇到的不同部分组合在一起。我改变'required'属性的最终函数如下:

function setWidgetRequiredAttributes(baseDomNodeId, requiredValue){
    foundWidgets = dijit.findWidgets(dojo.byId(baseDomNodeId));
    console.log(foundWidgets);
    foundWidgets.forEach(function(widget){
        widget.required=requiredValue;
    });
}