Search code examples
javascriptdojodijit.formdijit.layout

Validation in Dojo Form


I have a dojo form in which 5 fields are there: 2 of them are validationtext box, 1 is filteringSelect and 2 are NumberText Box. On click of search button, I want user to enter atleast one value out of 5 fields. How can I apply this validation ?

Thanks


Solution

  • You need to use dijit/form/Form http://dojotoolkit.org/reference-guide/1.10/dijit/form/Form.html#dijit-form-form

    require(["dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox"], function(parser) {
        document.body.className += ' tundra'; //just to have the proper css  in the snippet
      
      
        parser.parse() //to render properly in the snippets
        
        
        //here is the part you are looking for:
        getValues = function() {
          console.log(myForm.getValues());
          values = myForm.getValues();
          var oneHasValue = false;
          for(var i in values) {
             if(values[i]) {
               oneHasValue = true;
               break;
             }
          }
          if(!oneHasValue) {
             alert('at least one field should not be empty')  
          }
        }
        
    });
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
    
    <div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
    encType="multipart/form-data" action="" method="">
        
        <table style="border: 1px solid #9f9f9f;" cellspacing="10">
            <tr>
                <td>
                    <label for="name">Name:</label>
                </td>
                <td>
                    <input type="text" id="name" name="name" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="gender">gender:</label>
                </td>
                <td>
                    <input type="text" id="gender" name="gender" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="extra">extra info:</label>
                </td>
                <td>
                    <input type="text" id="extra" name="extra" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="dob">Date of birth:</label>
                </td>
                <td>
                    <input type="text" id="dob" name="dob" data-dojo-type="dijit/form/DateTextBox"/>
                </td>
            </tr>
        </table>
    
        <button data-dojo-type="dijit/form/Button" type="button" onClick="getValues()">Get Values from form!</button>
    
    </div>