CODEWITHSUNDEEP
dojo
Chin
Chin

Reputation: 12712

dojo - programmatic way to show invalid message

dojo newbie - giving it a shot. After submitting a form, If an error is returned from the server I would like to show that message on the dijit.form.ValidationTextBox

var user_email = dijit.byId("login_user_email");
user_email.set("invalidMessage", data["result"]["user_email"]);
//need to force show the tooltip but how???

Any help much appreciated.

Upvotes: 7

Views: 12328

Answers (6)

Darrel K.
Darrel K.

Reputation: 1729

@arber solution is the best when using the new dojo. Just remember to set the focus to the TextBox before calling the "displayMessage" method. I am using dojo 1.10 which works create as follows:

function showCustomMessage(textBox, message){
    textBox.focus();
    textBox.set("state", "Error");
    textBox.displayMessage(message);
}

Dojo reference guid for ValidationTextBox: https://dojotoolkit.org/reference-guide/1.10/dijit/form/ValidationTextBox.html

Upvotes: 1

GibboK
GibboK

Reputation: 73918

You can call directly the "private" function:

textBox._set('state', 'Error');

You get the same result as @phusick suggested but with less code and arguably in a more direct and clean way.

Notes: _set is available to ValidationTextBox as declared on its base class dijit/_WidgetBase.

Live demo: http://jsfiddle.net/gibbok/kas7aopq/

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

dojo.ready(function() {

  var textBox = dijit.byId("validationTextBox");

  dojo.connect(dijit.byId("tooltipBtn"), "onClick", function() {

    dijit.showTooltip(
      textBox.get('invalidMessage'),
      textBox.domNode,
      textBox.get('tooltipPosition'), !textBox.isLeftToRight()
    );
  });

  dojo.connect(dijit.byId("validatorBtn"), "onClick", function() {
    // call the internal function which set the widget as in error state
    textBox._set('state', 'Error');
    /*
        code not necessary
        var originalValidator = textBox.validator;
        textBox.validator = function() {return false;}
        textBox.validate();  
        textBox.validator = originalValidator;
    */
  });

});

Upvotes: 0

inanutshellus
inanutshellus

Reputation: 10001

I know this question is ancient, but hopefully this'll help someone. Yes, you should use validators, but if you have a reason not to, this will display the message and invalidate the field:

        function(textbox, state /*"Error", "Incomplete", ""*/, message) {
            textbox.focus();
            textbox.set("state", state);
            textbox.set("message", message);
        }

Upvotes: 0

phusick
phusick

Reputation: 7352

See it in action at jsFiddle.

  1. Just show tooltip:

    var textBox = bijit.byId("validationTextBox");
dijit.showTooltip(
    textBox.get("invalidMessage"), 
    textBox.domNode, 
    textBox.get("tooltipPosition"),
    !textBox.isLeftToRight()
);

  2. Temporarily switch textBox validator, force validation, restore the original validator:

    var originalValidator = textBox.validator;
textBox.validator = function() {return false;}
textBox.validate();  
textBox.validator = originalValidator;

Or do both at once.

Upvotes: 12

arber
arber

Reputation: 31

I think you can show the tooltip via myVTB.displayMessage('this is coming from back end validation'); method

Upvotes: 3

wuhi
wuhi

Reputation: 174

you need to do the validation in the validator-method. like here http://docs.dojocampus.org/dijit/form/ValidationTextBox-tricks you also need to focus the widget to show up the message! dijit.byId("whatever").focus()

Upvotes: 2

Related Questions