Question

下面是一个dojo Dialog的代码，它将弹出以使用户能够选择将提交给数据库的查询的开始和结束日期。我想要做的是确保用户在单击提交按钮之前选择了两个日期。我认为在dateTextBoxes上设置'required：true'属性可以解决问题。但是，该属性仅在用户单击dateTextBox时触发，然后单击其他内容而不实际选择日期。如果我从不点击dateTextBoxes，我仍然可以单击提交按钮并生成一个查询，其开头和结束日期为'null'。所以，我考虑将提交按钮设置为“禁用”，但是在启用按钮之前检查dateTextBoxes是否具有值的最佳方法是什么？

dojo.require("dojo.parser");            
dojo.require("dijit.Dialog");                         
dojo.require("dijit.form.Button");             
dojo.require("dijit.form.DateTextBox");                 
dojo.require("dijit.form.Form");

var historyDialog, historyForm, hdDateTextBox1, hdDateTextBox2;

dojo.ready(function(){createHistoryDialog(); buildHistoryForm();});  

function createHistoryDialog(){                  
    historyDialog = new dijit.Dialog({                     
    title: "Query Task History",                        
    style: "width:300px; height:350px; text-align: center; font-size: 16px;",                
    id: "historyDialogBox"
    });             
}                                                         

function buildHistoryForm(){        

    historyForm = new dijit.form.Form({                     
        encType: 'multipart/form-data'
        },dojo.doc.createElement('div'));    

    hdDateTextBox1 = new dijit.form.DateTextBox({                     
        id: "beginningQueryDate",                      
        onChange: function(date){dijit.byId('endingQueryDate').constraints.min = date;},          
        required: true,      //this doesn't seem to be working               
        constraints: {datePattern: 'yyyyMMdd'}                                    
    });                                  

    hdDateTextBox2 = new dijit.form.DateTextBox({                     
        id: "endingQueryDate",                      
        onChange: function(date){dijit.byId('beginningQueryDate').constraints.max = date;},                    
        required: true,        //this doesn't seem to be working             
        constraints: {datePattern: 'yyyyMMdd'}                                     
    });                                  

    var historySubmitButton = new dijit.form.Button({                     
        id: 'historySubmitButton',               
        onClick: submitHistoryQuery,   
        type: 'submit',       
        label: "Show History"                 
    });    

    historyForm.domNode.appendChild(dojo.create("label", {innerHTML: "myTask", style: "font-size: 20px;"}));      
    historyForm.domNode.appendChild(dojo.create("br"));                   
    historyForm.domNode.appendChild(dojo.create("br"));                  
    historyForm.domNode.appendChild(dojo.create("label", {innerHTML: "Beginning Date:"}));
    historyForm.domNode.appendChild(dojo.create("br"));                 
    historyForm.domNode.appendChild(hdDateTextBox1.domNode);                 
    historyForm.domNode.appendChild(dojo.create("br"));                 
    historyForm.domNode.appendChild(dojo.create("br"));                 
    historyForm.domNode.appendChild(dojo.create("label", {innerHTML: "EndingDate:"}));
    historyForm.domNode.appendChild(dojo.create("br"));
    historyForm.domNode.appendChild(hdDateTextBox2.domNode);                 
    historyForm.domNode.appendChild(dojo.create("br"));                 
    historyForm.domNode.appendChild(dojo.create("br"));                 
    historyForm.domNode.appendChild(historySubmitButton.domNode);                 
    historyForm.domNode.appendChild(dojo.create("br"));                 
    historyForm.domNode.appendChild(dojo.create("br"));                              
}

showHistoryDialog = function(){     
    historyForm.reset();
    dojo.byId("historyDialogBox").appendChild(historyForm.domNode);
    historyDialog.show();                
};

Answer 1

一种快速简便的方法，就是使用表单的onSubmit事件，并检查表单是否有效（这不会自动发生，因为你注意到了:-)）。

historyForm = new dijit.form.Form({                     
    encType: 'multipart/form-data',
    onSubmit: function(e) { if(!historyForm.validate()) dojo.stopEvent(e); }
},dojo.doc.createElement('div'));

确保dijit.form.Form上的widjit值

1 个答案: