[Dojo-interest] formbind valdation of regexptextbox?

aziz at azizce.com aziz at azizce.com
Sun Jan 21 05:25:35 MST 2007


Hi Mike,

You can use profle like this :
Constraints could takes many different functions
var profile = {
			// filters change the field value and are applied before validation.
			trim: ["adi","soyadi","mail"],
		    ucfirst: ["adi","soyadi"],

			// required input fields that are blank will be reported missing.
			required: ["adi","soyadi","mail","gorus"],

			// Fields can be validated using any boolean valued function.
                        // @ MIKE
                        // i think this is the code you need....
			constraints: {
			your_field_name: function()
				       {
				         var re = new
RegExp("^[a-z0-9_-]+(\.[a-z0-9_-]+)*@([0-9a-z][0-9a-z]*[0-9a-z]\.)+[a-z]{2}[mtgvu]?$");
                                                    if(form.your_field_name.value.match(re)
)
						  {
							  return true;
						  }
				       }
                        }
		};

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
Alihan CETIN
WebMaster@
PHP Programming & Security & Database & Design
http://www.azizce.com
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-


----- Original Message -----
From: Mike Kinney
To: dojo-interest at dojotoolkit.org
Sent: Sunday, January 21, 2007 4:04 AM
Subject: [Dojo-interest] formbind valdation of regexptextbox?


I've been trying to figure out how to use dojo with simple form
validation. I've been able to get to the point where it's pretty useable.
I want to share what I've found up to this point. I've tried to make it as
simple as possible to demonstrate a useable form.

But, I also need a little help. Anyone know how to validate a value
against a regular expression in a regexptextbox? (See the TODO below)

--- snip ---

<html>
<head>
<title>Simplest Form Binding with Validation</title>
<script type="text/javascript" src="/dojo/dojo.js"></script>
<script type="text/javascript">

   dojo.require("dojo.io.*");
   dojo.require("dojo.validate");
   dojo.require("dojo.validate.check");
   dojo.require("dojo.widget.validate");
   dojo.require("dojo.widget.ValidationTextbox");
   dojo.require("dojo.widget.RealNumberTextbox");
   dojo.require("dojo.widget.IntegerTextbox");
   dojo.require("dojo.widget.DateTextbox");
   dojo.require("dojo.widget.RegexpTextbox");

   //djConfig.isDebug=1;

   function init() {

      // Note: Uncomment this next line for testing.
      //alert('You should only see this once. If you see it more than
once, then we did not use an ajax call to update the results.');

      // set focus to first form, first input field, and select all text
in box
      document.forms[0][0].select();
      window.status="";

      x = new dojo.io.FormBind({
         formNode: "test",
         load: function(type, data, e) {
            dojo.byId("output").innerHTML = dojo.string.escapeXml(data);
            // Note: For the status to change, the user has to allow the
status to change.
            window.status="Submitted!";
         }
      });
      x.onSubmit = function(form) {
         //dojo.byId("output").innerHTML = "<font color='red'>Warning:
Cannot submit form. There is a problem with one of the
fields.</font>";
         window.status = "Checking...";

         // To prevent the form from submitting you need to ensure
         // the input fields are set when added to the form as well
         // as defined here.
         var profile = {
            required: [ "name", "integer1", "real1", "date1", "grade" ],
            constraints: {
               integer1: dojo.validate.isInteger,
                  // Note: You can validate the same fields multiple times.
                  // Also note that if you forget to add a field that has
                  // "form" validation, then you will not be able to see
                  // that input in the getMissing() call. Should submit
                  // enhancement to dojo to perhaps check for that.
               integer2: dojo.validate.isInteger,
               integer2: [dojo.validate.isInRange, { min:"10", max:"20" } ],
               real1: dojo.validate.isRealNumber,
               date1: [dojo.validate.isValidDate, "M/D/YYYY"],
               // TODO: How do you validate a value against a regexp?
(e.g. How to handle the 'grade' input?)
            }
         };

         var results = dojo.validate.check(form, profile);

         // Let the user know why they cannot continue...
         var s="";
         if (!results.isSuccessful()) {
            s="Warning: Could not submit form.";
            if (results.hasInvalid()) {
               s += "Review these fields:" + results.getInvalid() + ":";
               alert(s);
            }
            if (results.hasMissing()) {
               s += "These fields are required:" + results.getMissing() +
":";
               alert(s);
            }
         }
         else {
            s="Submitting form.";
         }
         window.status=s;

         return(results.isSuccessful()); // return true if it passed the
validation
                                        // if false, then the form will
not be submitted
      }
   }

   dojo.addOnLoad(init);
</script>
</head>
<body>

   <!-- Note: '/showPost' simply prints out the name/value pairs -->
   <form action="/showPost" method="post" id="test" name="test">
   <!--form action="" method="post" id="test" name="test"-->

      <table>
         <tr>
            <td>Name:</td>
            <td><input type="text" dojoType="ValidationTextBox"
required="true" missingMessage="* Required" name="name"
id="name" trim="true" value="" /></td>
         </tr>
         <tr>
            <td>integer:</td>
            <td><input type="text" dojoType="IntegerTextbox"
required="true" missingMessage="* Required"
invalidMessage="Enter an integer value." id="integer1"
name="integer1" trim="true" value="" /></td>
         </tr>
         <tr>
         <tr>
            <td>integer2: <br>(10-20)</td>
            <td><input type="text" dojoType="IntegerTextbox"
required="true" missingMessage="* Required"
invalidMessage="Enter an integer value. (10-20)" min="10"
max="20" id="integer2" name="integer2" trim="true" value=""
/></td>
         </tr>
         <tr>
            <td>real1:</td>
            <td><input type="text" dojoType="RealNumberTextbox"
required="true" missingMessage="* Required"
invalidMessage="Enter a real number." id="real1" name="real1"
trim="true" value="" /></td>
         </tr>
         <tr>
            <td>Date:</td>
            <td><input type="text" dojoType="DateTextbox" trim="true"
required="true" missingMessage="* Required"
invalidMessage="Enter a valid date. (mm/dd/yyyy)"
format="M/D/YYYY" id="date1" name="date1" value="" /></td>
         </tr>
         <tr>
            <td>Grade:</td>
            <td><input type="text" dojoType="RegexpTextbox"
required="true" missingMessage="* Required" trim="true"
invalidMessage="Enter a valid grade. (A, B, C, D, or F)"
regexp="^[ABCDF]$" uppercase="true" name="grade" id="grade"
value="" /></td>
         </tr>
         <tr>
            <td>Location:</td>
            <td><input type="text" name="loc" value="" /></td>
         </tr>
      </table>

      <br>

      <!-- FormBind will only work if you have an input type submit. We
get around that
        -- by having a very small image button.
        -->
      <input type="image" src="/images/shim.gif" value="submit" />

      <br>

      <div id="output">Complete the form and press ENTER.</div>

   </form>

</body>
</html>

--- snip ---


-- 
-------------------------------------
Mike Kinney
Red Ace Solutions, Inc.
Phone 360-737-6400 x201


--------------------------------------------------------------------------------


_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest at dojotoolkit.org
http://dojotoolkit.org/mailman/listinfo/dojo-interest




More information about the Dojo-interest mailing list