Is there any code or custom options available to achieve the following :
1> When an error occurs in a text box, the validation shows the error. Forces the user to remove the error and only then proceed to complete remaining text inputs. KEEPS the mouse focus on the Text Box.
I have used built in mx:Validator tags, but it does not coerce the user to remove the error. Instead, user can easily go ahead without rectifying the error.
2> Can the error message which generally appears as a tooltip when mouse focus moves over the text input with the error, REMAIN until the user removes error and not just be displayed on mouse hover action?
You can customize your ToolTips to show your Error. Check this link to customize your tooltip, to show your error in ToolTips
For #2, check out http://aralbalkan.com/1125.
Unfortunately, it is a lot of hassle if you have multiple/large forms. It is unfortunate flex doesn't provide more styling options for the error tooltip.
#1 seems to be a bad UI design. While you may not allow them to submit a form unless they enter valid information, they should be able to navigate around the form freely and fill in the information as they choose. Just my opinion.
A solution to question 1) is as follows;
Use the Validator.validateAll static method to check that all form items are valid before allowing the form to be submitted. The following snippet is taken from a good flex example which shows this
private function resetForm() :void
{
btnLogin.enabled = false;
}
private function validateUs() :void
{
btnLogin.enabled = (Validator.validateAll([val1,val2]).length == 0);
}
The complete example is here
http://idletogether.com/easy-form-validation-and-submit-button-enable-disable-in-flex-3/
Related
Is there a feature in Xamarin Forms which will point to (scroll up) to a label which became visible after validation? What I am trying to do is: if required field is blank I display label under it - saying that it needs to be filled out, I have a scrollable page and when label becomes visible I want to make it show that label by scrolling the page to desired location, so user will know what is missing.
Thank you.
You have two distinct points to implement:
first, your entry validation: there are many ways to do it, but you can take a look at this fully documented sample from Xamarin: Entry validation sample
Then next, you have to scroll to the (first) invalid entry control. That means that all your entries must be embedded into a parent Scrollview control. Then you have to find the first invalid UI element to scroll to (make your own "business" method to find this control).
Then just call the Scrollview scroll method. An example sample code could be:
// in your xaml.cs
//
public Task FocusInvalidEntryAsync()
{
var firstInvalidEntry = FindInvalidEntries().FirstOrDefault();
if(firstInvalidEntry != null)
{
return parentScrollView.ScrollToAsync(firstInvalidEntry, ScrollToPosition.MakeVisible, true);
}
return Task.FromResult(true);
}
The FindInvalidEntries() method is your own method to determine wich UI entry is invalid (maybe it needs your ViewModel).
Then ScrolltoAsync() is a method that will scroll the parent scrollview to the desired control. The last parameter indicates if you want to display the scroll animation.
Tell me if it's clear !
Alert-Banner is applied in our clarity UI. It is triggered by error message and Alert-ERROR message type.
<alert-banner [message]="message" [type]="messageType"></alert-banner>
This alert only shows up after UI main page get refreshed.
Not sure if the way we use alert-banner is wrong - some settings that trigger page refreshed is missed in the alert-banner definition.
Or we should apply other alerts mechanism. reading around https://vmware.github.io/clarity/community
could not find an example pass varied "alert text" in.
Clarity doesn't have an <alert-banner> component. Did you check where it was defined?
I have a gridpanel and want to show a errortooltip on mouse hover as we see for textfields and combobox. Is there any inbuilt component to show this error styled tooltip for grid panel.
i am doing this to find validate based on the number of records in the grid panel.Please Help
There's nothing built-in to accomplish this, but you can still do it. Lucky for you, I had to do something like this not too long ago.
You'll need to use a column renderer. You'll also need to store the error message on the record itself, or have a way to access error messages by record. Your renderer should look something like this:
renderer: function(value, metaData, record){
if(/* record has error */){
metaData.tdCls += " x-form-invalid-field"; // Squiggly red lines
metaData.tdAttr = "data-errorqtip='This is my error message!'";
}
return value;
}
You may need to play around with styling and whatnot, but that is the gist of it. Also, you'll have to refresh your grid if the validity of your records changes, to make sure your tooltips say updated.
I am using modalpopup to enter some value in a textfield. After the value is selected in the modalpopup view, the modalpopup is closed and the value takes the appropriate value. Even if the value is displayed in the textfield, the textfield1.text returns an empty string. When I see the source code (html), I see that even the textfield isn't displaying anything; it hasn't really had this value input, because the appropriate html input field hasn't got a value yet.
This is the code I use to fill this textfield:
function CloseRequestModal(s)
{
document.getElementById('<%=txtRequest.ClientID%>').value = s;
var mpu = $find('<%=ModalPopupExtender3.ClientID%>');
mpu.hide();
}
Please help.
I would need to see source HTML cause it looks like you have template language mixed into your javascript but perhaps instead of "textfield1.text" you use "textfield1.value"?
Additionally, you would need to view "generated" source (with a browser plugin) or inspect the node with web inspector on safari/chrome or firebug on firefox in order to see the change that you made with javascript.
i fixed this problem in an alternate way.
even if the value is there (in the textfield), none of the events is fired, to let know the browser / compilator that the value really exists.
so i decided, despite editing the value of the textfield, i store this value in the session too. in this case, the value is displayed for user needed in the interface, and on the other hand i use the value that i stored in the session.
Scenario is : old site which has lots of JS code already written. If user want to change all the alert messages to new age jazzy Div based alert which are very common using JQuery, YUI, Prototype... etc.
There are mainly tree JS dialogs
1. alert
To changes this its simple we just have to write new function which will show the div popup and show the message, after that override the window.alert
function showDivAlert(strMessage){
//div popup logic and code
}
window.alert = showDivAlert;
2. prompt
This too look easy to write function to accept the string and show the text box for input value. Now as return action is based on the click of "OK" button life is easy here.
function shoDivPromp(strMessage){
//div pop up to show the text box and accept input from the user
}
window.prompt = shoDivPromp;
3. confirm
Now above two were easy to override and modify the default dialogs but there is complication with the confirm.
However default JS confirm dialog stops JS execution and when user click OK or Cancel execution is resumed by determining the return value (true/false). But if we user div popup the execution is not stopped which is problem. We can still implement the confirm but in that case we have to bind methods for OK and CANCEL case which will be attached to OK and CANCEL button. With this function signature will be like.
function newConfirm(msg, fun OkAction(), fun CancelAction)
Now this is problem that this cant help me change the confirm dialog across the site as we did with alert();
Question
I am not sure whether its possible or not to achieve but i think can be using some JS pattern. So let me know if its possible.
Now this is problem that this cant help me change the confirm dialog across the site as we did with alert();
That's correct. It's not possible to reproduce the synchronous nature of the alert/confirm/prompt functions in native JavaScript. There is the non-standard method showModalDialog which can do it using a separate pop-up document, but it's not supported by all browsers and it's generally considered highly undesirable.
So the plug-in-replacement strategy isn't going to work. You are going to have to change every place you called these methods in the rest of the script.
The usual pattern is to do it using inline anonymous functions, to preserve the local variables using a closure, eg. replace:
function buttonclick() {
var id= this.id;
if (confirm('Are you sure you want to frob '+id+'?'))
frob(id);
wipe(id);
}
with:
function buttonclick() {
var id= this.id;
myConfirm('Are you sure you want to frob '+id+'?', function(confirmed) {
if (confirmed)
frob(id);
wipe(id);
});
}
If you need this to be preserved you would need to look at a further nested closure or function.bind to do it. If you have your call to confirm in a loop things get considerably more difficult.
Obviously you also have to ensure that critical global state doesn't change whilst the confirm box is up. Usually this risk is minimised by greying out the rest of the page with an overlay to stop clicks getting through. However if you have timeouts they can still fire.
All 3 methods actually stop js execution, not just the confirm, because they're all modal dialogs. Personally, I would try to keep everything as asynchronous as possible as modal dialogs prevent interaction with the current document.
Your best bet is to use callback functions from the new confirm popup as you suggested yourself.
I'm having a hard time understanding exactly what you want to achieve. It sounds like you want to do something like the following:
Run some javascript code
Display a "confirm" box
Wait until the ok button or cancel button is clicked
Continue code when user clicks ok, return when user clicks cancel.
The reason you want to do this is that overriding the function with something that makes use of callbacks would require rewriting each section of code that uses the confirm function. If you want my advice, I would go ahead and rewrite the code so that it performs asynchronously. There's no way you can delay script execution without locking up the document which includes the OK and Cancel actions of your dialog.
if you changed the roles Alert / Prompt / Confirm. slows the execution pending user interaction to run the following code.
Overriding these functions, the code continues its execution.
To achieve this you have to modify each part of the code and work as if you were with asynchronous functions.
Then you can use any plugin for windows as sexy-alert-box, and overwrite Alert / Prompt / Confirm
The function signature would simply be:
function newConfirm(msg, okAction, cancelAction);
and would be used as:
function newConfirm(msg, okAction, cancelAction){
var ok = doWhateverPromptIsNecessary();
if (ok) {
okAction();
} else {
cancelAction();
}
}
That is, to pass function "pointers" in to a function as arguments, simply pass in the function name without the (). The function signature is the same.