JavaScript DHTML/Dojo toolkit/ValidationTextBox

Материал из Web эксперт
Перейти к: навигация, поиск

Create validation text field

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ValidationTextBox");
      dojo.addOnLoad(show);
      
      function show() {
        var myDijit = new dijit.form.ValidationTextBox({
          value : "12345", regExp : "^(\\d{5}-\\d{4})|(\\d{5})$",
          required : false, invalidMessage : "Zip code, format must be 99999"
        });
        dojo.byId("divProgrammatic").appendChild(myDijit.domNode);
      }      
    </script>
  </head>
  <body class="tundra">
    <div id="divProgrammatic">&nbsp;</div>
  </body>
</html>



Email address regex for ValidationTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");  
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="email">Email: </label>
        <input type="text" id="email" name="email" size="30"        
           dojoType="dijit.form.ValidationTextBox" 
           required="true"  
           regExp="[\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b]+"
           promptMessage="Enter email address."
           invalidMessage="Invalid Email Address." 
           trim="true"
       />
</form>
</div>
  </body>
</html>



Set invalide message for dijit.form.ValidationTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");  
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="firstName">Name: </label>
        <input type="text" id="firstName" name="firstName" 
           dojoType="dijit.form.ValidationTextBox"
           required="true" 
           propercase="true" 
           promptMessage="Enter first name."
           invalidMessage="First name is required."  
           trim="true"  
           style="width: 10em;"
        />
    
</form>
</div>
  </body>
</html>



Set proper case for ValidateTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");  
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="firstName">Name: </label>
        <input type="text" id="firstName" name="firstName" 
           dojoType="dijit.form.ValidationTextBox"
           required="true" 
           propercase="true" 
           promptMessage="Enter first name."
           invalidMessage="First name is required."  
           trim="true"  
           style="width: 10em;"
        />
    
</form>
</div>
  </body>
</html>



Set required to true for ValidationTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");  
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="firstName">Name: </label>
        <input type="text" id="firstName" name="firstName" 
           dojoType="dijit.form.ValidationTextBox"
           required="true" 
           propercase="true" 
           promptMessage="Enter first name."
           invalidMessage="First name is required."  
           trim="true"  
           style="width: 10em;"
        />
    
</form>
</div>
  </body>
</html>



Set to lower case for dijit.form.ValidationTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");  
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="firstName">Name: </label>
        <input type="text" id="userName" name="userName" size="20" 
           dojoType="dijit.form.ValidationTextBox"
           trim="true" 
           required="true" 
           lowercase="true"
           promptMessage="Enter user name."
           invalidMessage="User name already taken by someone else."
        />
    
</form>
</div>
  </body>
</html>



Trim ValidationTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");  
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="firstName">Name: </label>
        <input type="text" id="firstName" name="firstName" 
           dojoType="dijit.form.ValidationTextBox"
           required="true" 
           propercase="true" 
           promptMessage="Enter first name."
           invalidMessage="First name is required."  
           trim="true"  
           style="width: 10em;"
        />
    
</form>
</div>
  </body>
</html>



Use regex to validate a dijit.form.ValidationTextBox

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
     <input type="text"
            dojoType="dijit.form.ValidationTextBox"
            regExp="^(\d{5}-\d{5})|(\d{5})$"
            required="true"
            invalidMessage="Format must be 99999">
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/ValidationTextBox&oldid=1931»