custom form validation using Dojo_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-14 10:29 出处：网络

I want to perform some client side form validation and I was thinking to use Dojo to do it. I want the user to be able to insert what he wants in the text boxes, but when he clicks submit, the form t

I want to perform some client side form validation and I was thinking to use Dojo to do it.

I want the user to be able to insert what he wants in the text boxes, but when he clicks submit, the form to be validated. If a field is invalid I want to display a red border around the textbox and a message to the right, also in red.

If user clicks on the textbox in error (onfocus), the error message disappears. If he clicks on the error message the textbox receives focus and error message disappears. Again he can insert whatever he wants until validation.

As I understand, Dojo has some default behavior with tooltips and textbox turning yellow if invalid (see example bellow).

Is it possible to do what I want using Dojo or should I roll my own implementation for validation (I mean what would be easier: write some stuff I understand and can control or fight with some yet unknown toolkit)?

If it is possible, how can I do it or where can I find information for doing it?

Thanks!

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="dijit/themes/tundra/tundra.css">
      <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
      <script type="text/javascript">
        dojo.require("dijit.form.Form");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.ValidationTextBox");
        dojo.require("dijit.form.DateTextBox");
      </script>
  </head>
  <body class="tundra">
    <table style="border: 1px solid black;">
      <tr>
        <td>Na开发者_开发技巧me:</td>
        <td>
          <input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox" />
        </td>
      </tr>
      <tr>
        <td>Date of birth:</td>
        <td>
           <input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox" />
        </td>
      </tr>
     </table>
     <input type="button" name="submitButton" value="Submit" />
  </body>
</html>

Well dojo only shows the error messages as tooltips not as text messages like live validations which is i think what you are looking for

http://livevalidation.com/examples

But using dojo u cannot get messages as text but only as tooltip red border u can get using validation textboxes and if u want to valdiate on form submit use dojo form rather then html .Dojo form has a function called validate that actually automatically calls internally all dijit widgets and checks if any one of them is invalid and return true and false respectively.You can control submit of your form with this function

Let us consider, we have a dijit Form:-

<form id="formId" data-dojo-type="dijit.form.Form">
...<!--all form widgets are here-->
</form>

and while the user submits the form, you need to validate like below:-

registry.byId("formId").validate(); //returns boolean value

which will return a boolean value - true if all fields are valid, false if any one field is invalid. So, if this returns true, you can proceed with the logic, else you can display some custom error message.

If any dijit form widgets are added dynamically to this form, then first, we need to connect them.

var form = registry.byId("formId");
form.connectChildren(); //connects all child widgets of this form
form..validate(); // returns boolean value

custom form validation using Dojo

精彩评论

关注公众号

热门标签

图文推荐

custom form validation using Dojo

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：