I am dynamically generating paper-radio-group along with other paper elements on my page such as paper-input, paper-dropdown-menu.
I need to validate that only one of the paper-radio-button is selected from the group.
I found that there is no required attribute or validate() function on paper-radio-group which can be called upon to validate it, however, we have validate() function on paper-radio-button which just check whether the radio-button is selected or it shows the error message.
I found that there is an attribute allow-empty-selection, however, I need to validate on a next button. For other paper elements, for example, paper-input, I call validate() on next button and it displays the error message, but lack of validate method in paper-radio-group.
Is there a reason for not having validate on radio-group, which I am missing.
Has someone done it earlier or help me on it.
Related
I have a html5 date control with a min/max contraint as below.
<input class="testclass" type="date" min="2020-02-01" max="2020-03-01"/>
The control can sometimes be loaded via ajax and there may be occasions when there are multiple of these controls on a form. I intend to catch the invalid state on submit so I can display the error in a way which is more coherent with the rest of the error messages in the forms.
The above works perfectly if I directly wire up the event listener to the specific control. However as it can be loaded by ajax, can appear multiple times, and I don't know the id's in advance; I really want to wire it up at the document level using something akin to the following:
$(document).on("invalid", ".testclass", function (evt) {
//Do stuff
});
But when invalid this does not get hit (it is invalid and the default message shows etc). However the input event, if wired up the same way is hit as expected. I just can't see what I'm doing wrong. I've included a fiddle for anyone who wants to see it.
https://jsfiddle.net/thnderchild/dzm1sgvc/13/
Okay, so the answer I finally found was that the invalid event simply doesn't bubble, so a global event handler never receives the event.
I was under the impression all events bubbled up.
Which jQuery events do not bubble?
So if we use this as a control which is added to the dom via ajax - we have to bind/rebind the event.
In my Reactive Form, I have added validations for the fields. The form is at https://stackblitz.com/edit/angular-jx7fdu
I want that the validation should happen once the user has left the input field. How could I do it? I found this answer on SO but it seems it would work if I use FormControl directly and not with FormBuilder because a FormBuilder doesn't take AbstractControlOptions parameter it seems.
Angular2 - FormControl Validation on blur
You are showing errors, when the form input
has an error
has been touched or is dirty
When you focus a form input, nothing changes. When you enter any character into it, it becomes dirty (still untouched), when you leave it, it becomes dirty and touched.
Thus, if you want the error message to show up, after you left the input field, then change your code from
(this.control.dirty || this.control.touched);
to
(this.control.dirty && this.control.touched);
Because then you show the validation error, when somebody has both changed and touched a control, not just either (which would show error, even when you are still focused on one input).
Much thought has already gone into practices around validating the user input in a form. I have a programming question about the "inline validation", also called "onblur validation". (A research article about the benefits of inline validation can be found here).
Let's say I have a very simple form with 5 inputs and 1 submit button at the bottom. The user focusse on the first field first. After pressing tab or manually clicking on it, he goes to the second input. This triggers the validation of input field 1. Depending on the techniques used, this might take a few seconds (for example, if a server postback is required to truly validate the field).
MY problem lies with the last field. User will be expecting to see the inline validation after they're done. But users do generally not tab if the next ui element is a button instead of yet another input element. Thus, the onblur validation will not trigger and the user gets no feedback, which they might mistake for erronous input. If they manually click on the submit button, the validation will trigger... but it will also trigger the total form submit, likely leading to another page if all is valid. Now, some users might be smart enough to realize this is onblur validation and they should "click anywhere" to trigger the validation, but I can't really count on that.
I thought of one solution: using the keypress event instead of the onblur event for the last input field of a form. However, the article cited above states it is better to avoid this kind of validation. It would also drastically increase the amount of validation to be done (one time for every keypress)
What are your thoughts on trying to mimic the nonexistant event "user stopped typing but did not focus out of input element"? Can it be done by combineing the keypress event and a timer? (Like, if user did not type anything for 2 seconds, then validate?)
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms
$('input[type="email"]').keyup(function(){
clearTimeout(typingTimer); //reset the timer
typingTimer = setTimeout(validateEmail, doneTypingInterval);
});
Change validateEmail to the name of the function that validates the email input.
In my app I've got multiple tabs. In tabs I've got input fields and I want to validate these fields in client side. For this I try to use HTML5 attributes, for example required attribute or pattern attribute. In case when I've got empty field (field is required) in first tab which is selected, the error message appears The field is required, but when I've got empty field in other tab for example in third tab and my first tab is selected, the error message does not appears.
Question
Is there way to organize validation with HTML5 in this situation ?
Are you hiding form elements with display: none? If your elements are not visible they will not trigger the validation UI:
Report the problems with the constraints of at least one of the
elements given in unhandled invalid controls to the user. User agents
may focus one of those elements in the process, by running the
focusing steps for that element, and may change the scrolling position
of the document, or perform some other action that brings the element
to the user's attention. User agents may report more than one
constraint violation. User agents may coalesce related constraint
violation reports if appropriate (e.g. if multiple radio buttons in a
group are marked as required, only one error need be reported). If one
of the controls is not being rendered (e.g. it has the hidden
attribute set) then user agents may report a script error.
In this situation you will have to listen to the invalid event with your own script and perform a suitable action.
Working in both A2003 & A2007.
How do we ensure that a selected TextBox gets the focus when the form loads? If we put MyTextBox.SetFocus in the Form_Load then we get the error:
can't move the focus to the control
This form is designed for rapid data entry, and the form somewhat rearranges itself based on the last used settings. So there are several different textboxes any of which may need the focus depending on the user. We can't just fix it in design time by giving MyTextBox TabIndex=0.
The help says something about calling Repaint which just doesn't make any sense at all:
You can move the focus only to a
visible control or form. A form and
controls on a form aren't visible
until the form's Load event has
finished. Therefore, if you use the
SetFocus method in a form's Load event
to move the focus to that form, you
must use the Repaint method before the
SetFocus method.
The best bet in this case, is to ensure that the textbox to get focus is numbered 0 in the Tab Index property.
You cant set the focus as the controls don’t really exist yet, try putting the code in the OnActivate event instead
Or just put a DoCmd.Repaint in the OnLoad event before trying to set the focus. Both should work but I'm not near a computer to check
In my experience, I've always gotten that error when the control I was trying to set focus to was either 1)not visible or 2)not enabled. I assume you've already checked those, but it would be worth double checking at runtime when you get the error message (especially since you said you are shuffling the controls at runtime).
I use the .SetFocus method pretty regularly without trouble. I don't recall ever getting an error message when setting focus to a control that already has it as Remou stated in his answer.
I believe there is also a third case that occurs if you try to set focus to a control in the form header/footer of a bound form that has had all of its records filtered out. I know that situation causes "disappearing" contents in an unbound combo box, but I think it may also play havoc with the SetFocus method. If you are opening the form in Data Entry mode, though, that should not be an issue.
Move SetFocus to the form's On Current event. Should work then unless perhaps the form's record source contains no records and you've set the form's Allow Additions property to No. In that case your text box will not be available to SetFocus on, but in my testing it doesn't throw an error.