Dojo/Dijit setting invalid message and failing validation
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();
}
});
});
Answer
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');