Dojo/Dijit setting invalid message and failing validation

StackOverflow https://stackoverflow.com/questions/23068497

Domanda

I have a form item with missingMessage and invalidMessage defined for the item. I call the form validation method on the item for validation. If the item is empty the missingMessage is called and the red exclamation mark error icon is shown.

I am trying to set the invalidMessage on text item when the user enters a specific value how can i get the invalidMessage and the red exclamation mark to show without hard coding a constraint on the text item.

I would like to use this for custom validation on items. If the user enters a particular value i would like fail the validation and return an error. Here i am trying to tell the user they cannot enter the value 'John' in the first name field. I am getting the red exclamation mark set however the invalidMessage is not showing.

I would like when the user clicks on the exclamation mark they can see the error message and when they begin to type or change the contents of the field the exclamation mark nad error message is no longer shown.

Jsp

<body class="claro">
    <form id="myform" data-dojo-type="dijit/form/Form">

    <input
    data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="
            regExp: '[\\w]+',
            required: true,
            invalidMessage: 'Invalid First Name !',
            missingMessage: 'First Name Required !'"
        id="fnameTextBox" title="First Name"
    placeholder="Your First Name"
    />

    <input
    data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="
            regExp: '[\\w]+',
            required: true,
            invalidMessage: 'Invalid Last Name !',
            missingMessage: 'Last Name Required !'"
        id="lnameTextBox" title="Last Name"
    placeholder="Your Last Name"
    />

     <button id="validateFields" data-dojo-type="dijit/form/Button">Validate</button>
    </form>
</body>

Javascript

dojo.require("dijit/form/Form");
dojo.require("dijit/form/Button");
dojo.require("dijit/form/ValidationTextBox");
dojo.require("dijit/Tooltip");

dojo.ready(function() {
    var fName = dijit.byId("fnameTextBox");
    var lName = dijit.byId("lnameTextBox"); 

    dojo.connect(dijit.byId("validateFields"), "onClick", function() {      
        var myform = dijit.byId('myform');
        myform.connectChildren();   


        if(fName == "John"){
            dijit.byId("fnameTextBox")._set("state","Error");
            dijit.byId("fnameTextBox").attr('_ErrorMessage', 'John is not allowed');

        }else{
             myform.validate();
        }

    }); 
});
È stato utile?

Soluzione

The best practice method to provide separate validation rules for a particular widget is overriding the default validator() method of that widget.

var fnameTextBox = dijit.byId('fnameTextBox');
fnameTextBox.validator = function() {
   if(this.value.indexOf("John")>-1) {
     this.set("invalidMessage",this.value+" is not allowed!");
     return false;
   }
   return true;
}
//below 2 lines to programmatically validate a specific field
fnameTextBox._hasBeenBlurred = true;
fnameTextBox.validate();
//To show the message on failing the field must be focussed
fnameTextBox.focus();

The validator function can have its own logic for validating and is subjective only to this field widget. If same has to be applied to more than one, define the function instead of anonymous, and use it for the respective fields.

But, if it only a value check, we can give just a regexp expression for this.

regExp: '^((?!John).)*$'

The following is not the best practice to do it. Because calling form.validate() will still validate this field as true, which is not correct.

dijit.byId("fnameTextBox")._set("state","Error");
dijit.byId("fnameTextBox").attr('_ErrorMessage', 'John is not allowed');

Altri suggerimenti

I have not enough reputation to add a comment for @Richard comment above, also I know this question is ancient. It might help someone.

For Dojo 1.10, in order to show the error message, .focus() must go first, otherwise it will not prompt the error until the second time that the validation happens. Also to show it as Error, it should also be stated in the code: firstName.focus(); firstName.set("message", "John is not allowed."); firstName.set("state", "Error");

In your code, setting attribute, "invalidMessage", only changes the default invalid message but does not trigger it to display, as the ValidationTextBox passes the validate() method. One way to do it is to take your approach, and instead do a 

firstName.set("message", "John is not allowed.");

which will cause the tooltip to show up. In order for setMessage to display though, the textbox has to be focused, so you'll need to call 

firstName.focus();

on the textbox beforehand. I've modified your fiddle to get what you were trying to do to work here:

http://jsfiddle.net/ZtzTE/38/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top