Question

Below is code for a dojo Dialog that will pop up to enable the user to select beginning and ending dates for a query that will be submitted to a database. What I want to do is ensure that the user has selected both dates before they are able click the submit button. I thought that setting the ‘required: true’ attribute on the dateTextBoxes would have solved the problem. However, that attribute only fires if the user clicks on the dateTextBox, and then clicks on something else without actually selecting a date. If I never click on the dateTextBoxes at all, I can still click the submit button and generate a query with beginning and end dates as ‘null’. So, I’ve considered setting the submit button to ‘disabled’, but what’s the best way to check that the dateTextBoxes have values before enabling the button?

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

One quick and easy way to do it, is simply to use the form’s onSubmit event, and check if the form is valid (this doesn’t happen automatically, as you have noticed 🙂 ).

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