Hey everyone,
I am trying to make a Button dijit that is linked to a ValidationTextBox that becomes enabled/disabled dynamically (on the fly, however you want to put it) when the input that is entered in the ValidationTextBox is in fact validated. For example, I have my ValidationTextBox:
<span style="position:relative;font-size: big;width:300px">
<input type="text" dojoType="dijit.form.ValidationTextBox"
id="origAddr"
regExp="\d{10}"
invalidMessage="Invalid phone address">
</span><BR>
<input type="text" dojoType="dijit.form.ValidationTextBox"
id="origAddr"
regExp="\d{10}"
invalidMessage="Invalid phone address">
</span><BR>
and my Button:
<button dojoType="dijit.form.Button" label="Call" id="callButton" widgetId="callButton" disabled='false'>
</button>
</button>
I basically want the button to become enabled whenever a proper address is put in the text box and satisfies the regular expression. How would I go about doing this?
Thanks in advance.
dojo.ditto
i have been working on this exact same idea all day today.
here's how i was trying to do it but it doesn't work - i'll use your example to show you what i thought would work:
<input type="text" dojoType="dijit.form.ValidationTextBox"
id="origAddr"
regExp="\d{10}"
invalidMessage="Invalid phone address"
onBlur="enableCall()">
</span><BR>
and then you have a function in your script:
// get a handle for the addr field and the callButton
var addr = dojo.byId("origAddr");
var callButton = dojo.byId("callButton");
// callButton is disabled if the addr is not valid or enabled if addr is valid
callButton.disabled = !(addr.isValid());
}
it all hinges on this one line
and i can't get it to work. i can't seem to find a way to find out if the value in the field is valid or not. in my case i'm doing an email address and validating against a regExp. i know the regExp is validating because i have an invalidMessage that is behaving properly. another one that didn't work was:
i keep getting errors that these functions don't exist.
maybe we can help each other if it's at all possible to do. i can't find any examples.
i saw your other post and figured out my problem
i needed to use dijit.byId and the setDisabled you talked about in your other post. also, use validate() to find out if the field is validated.
so the basic solution is:
add either
or
just be careful if you use onBlur and in enableCall you set the focus back to the origAddr field if it's not validated. the user will not be able to get out of the field until it is valid. at least if you use onChange the user can move focus if they don't change the value of the origAddr field.
// callButton is disabled if the addr is not valid or enabled if addr is valid
dijit.byId("callButton").setDisabled(!dijit.byId("origAddr").validate());
}
Hey neonstalwart thanks for
Hey neonstalwart thanks for your help! I'm sorry I didn't have a chance to look at it this weekend, but I'm glad you were able to figure it out using my other post.
I tried what you suggested and found the following problems:
This did not work,
but this did
but only the first time. Aka, if I typed something into the input box that was not valid, nothing happened (which is what its supposed to), and when I typed something into the input box that was valid, it changed the call button to enabled (which is right); BUT, when I then proceed to change the valid input into something invalid, the button does not go back into disabled. I think this has something to do with the dijit widget not calling enableCall() when its supposed to.
I addition,
never worked for me. When the input box went out of focus, nothing happened on a valid input.
Did any of these symptoms happen to you? I am trying to figure out why it happens this way as obviously the function works, its just a matter of actually having the input call the function.
I'll continue to work on it and let you know if anything comes up.
-Mike M
Update
Nevermind on the onBlur event not working.
I realized that when I updated to using 1.1.1 (from 1.0.0), onBlur worked like a charm. Using neonstalwart's code suggestions, this fixed the problem.
onChange, however, still did not. It would not detect change after the first one (like I posted above).
I have not been keeping tabs on what has/has not been updated with each release, so possibly the onBlur event was fixed with the latest 1.1.1.
-Mike M
Thnx
A hell lot of thnx to both zemoffm and neonstalwart.
you ppl saved a lot of time and work with your code.
This chunk of code is so useful and important i think it should be there in the official documentation.
It will help a lot of guys like me, who are new to dojo and javascript.
thnx once again.
dojo docs needs your help
Ah great, we need your help with docs. Please take a look at the new Docu Wiki http://docs.dojocampus.org and make them the best available (and Community driven) docs. It's planned to replace the current docs at dojotoolkit.org with the new Docu Wiki.
Marcus
------------
http://www.dojotoolkit-forum.de
Glad this info could be of
Glad this info could be of some help.
I'll definitely try to add some of this info into those docs if I get a chance, but if someone else wants to, feel free to use any of this info.
-Mike M