Use of setCustomValidity in form requires two clicks for onsubmit - javascript

I am working on a form that makes use of the HTML5 form validation attribute required for various text and radio button fields. The form also has two sets of checkboxes, of which at least one checkbox must be checked.
In order to keep the user error feedback consistent I am using the setCustomValidity method to throw a native error bubble when the checkboxes are left unchecked. This all works fine, however, there is an issue with error feedback when the form is submitted and the onsubmit event is used to trap unchecked checkboxes. This issue doesn't arise when the onclick event is bound to the submit button instead, but I understand it is preferable to use onsubmit.
Onclick test case (Click submit button and error bubble appears first time!)
http://jsfiddle.net/Jimadine/bZe5e/
Onsubmit test case (Click submit button - error bubble appears after second click)
http://jsfiddle.net/Jimadine/2vLszqac/
Furthermore, from my testing of the onsubmit case, Firefox highlights the unchecked checkboxes after the first click of the submit button; this is indicated by a red glow around the checkboxes. Then after a second click the error bubble displays. In other modern browsers the first click displays no on-screen indication that the checkboxes were left unchecked; I presume this is how the UX side of HTML5 validation was implemented in these browsers and that Firefox chose to do things slightly differently.
My question is why does the onsubmit test case require two clicks and what is an appropriate way to rectify this so it behaves like the onclick test case? I'm guessing it has something to do with the submit event firing after the validation but I'm not sure how to correct my code.

Here is a working jsfiddle base on your first example http://jsfiddle.net/bZe5e/6/.
The key is instead of doing this only on submit/button click. You are checking the validity on change + initially
doValidate();

I came across a similar problem, and for me it worked calling
reportValidity() right after setCustomValidity().
function onSubmit(e){
e.preventDefault();
const myInput = document.getElementById('my-input');
if( inputIsInvalid ){
myInput.setCustomValidity('My custom invalidity message.');
myInput.reportValidity();
}
}
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process

Related

What event to know when user has entered data into form?

I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.

The weird event capturing in IE

I just test same code on IE10 and Chrome Browser.
jsfilddle link
<div id='a'><input onclick="console.log('a');"/></div>
<div id='b'><button onclick="alert('b');"/></div>`
I put two different tags which are input and button in two different div tags.
both elements(input, button) have onclick attribute.
what I do is simple
put a cursor in input tag
press enter key
I tried this on IE10 and Chrome.
In chrome browser the event handler attached on button has not executed.
but in IE event handler attached on button has executed.
can anyone tell me why this disaster happens
IE is handling like a brain damaged boy the "enter" key press. Pressing Enter in textbox/input/etc in IE will click the completely unrelated button near it. Is the only browser with this approach.
It's related with the IE's algorithm for selecting submit buttons. Your button is considered one, even when no form tag is present.
<button onclick="alert('b');"/> has default type = "submit"
You can change that by changing the type with the button one.
<button type="button" onclick="alert('b');"/>
Working fiddle : http://jsfiddle.net/k1bkcx43/
This behaviour is related to implicit form submission which is correctly implemented by Chrome as per HTML5 spec. You can go through the spec here.
In short 'hitting the enter key' while a text field is focussed invokes browser controlled implicit form submission which in turn looks for first submit button under the 'form' element and invoke the attached handler.
In your case the 'button' element is defaulted to 'submit' type but since it is not a decendent of 'form' element hence it will not be invoked.
You can assume that current IE behaviour is not as per spec.

After execution of onclick-callback the 'checked' state is reset

This drives me mad. I just can't understand it.
I wrote a filter-function based on checkboxes and clicking on their labels. I'm checking the 'checked' state of checkboxes and show mathed elements of the list (the rest elements are hidden). I use 3rdparty plugin that stylizes checkboxes (cut from example) and makes checkboxes checked while other onClick event does the filtering.
The problem is that after 'checked' state is successfully set inside a callback-function it "suddenly" becomes reset! I can't understand why that happens.
I implemented the base logic (without stylizing) here: http://jsfiddle.net/3Xtuh/13/
and ask all to help me solve this, please.
The problem is that you are invoking the click event manually, and then when your function is done running, the default click event is invoked.
By passing the event variable to your click handler and calling event.preventDefault(); fixes this behavior.
See example here: http://jsfiddle.net/3Xtuh/14/
The HTML label will check the associated checkbox even if it´s hidden (using CSS) so there´s no need to reinvent the wheel.
You should use the change() event. Try this demo and view your console.
It's default browser behavior that's messing your js script. By default, clicking on a label that is either wrapped around checkbox or have valid for attribute set, is toggling checked state of that checkbox.
You've attached custom onclick handler on labels.
So what's going on is that when clicking on a label? Your click handler gets fired (in in you alter state of target checkbox), and then

Check if Selection Changed in OnClick event

Note: The answer marked as the answer, answers the questions in the Title. However, my underlying problem, using type ahead dropdowns, is solved by moving to IE8.
I have a drop down list that when I CLICK a NEW selection I want to cause a postback ("this.form.submit()") But only if the click on the dropdown list just changed the selection.
Note that OnChange will NOT work because when the selection is changed by the keyboard I would not want to postback because it is a type ahead dropdown list.
I also suppose I could use OnChange and check if the change was caused by the mouse.
Maybe if we can come up with both solutions and i'll see which works better?
Thanks so much for your help!!!!!
EDIT: More information:
AutoPostback = true; will not work. (don't want it to post back when the selection is changed by the keyboard)
onBlur = doPostBack; I tried this, but the result is not optimal. The user has to click off the ddl after making a selection with the mouse.
Another way to state what I want to do, i think, is do a postback when both the OnChange and OnClick events fire at the same time.
On the OnClick event I have javascript that sets the ddl.value = true;
On the OnChange event I check to see if ddl.Value = true if so I postback and set it to false.
On the OnKeyDown I set ddl.Value = false so that when I click on the ddl it only posts back if I change the selection with the mouse, if I press a key to use the type-ahead-feature it will not postback.
Not the most elegant solution but it works and you have to give me creadit for creativity.
Note: This solution work in combination with a script that fires on OnKeyDown that runs the type-ahead-ddl(ie. moves you to the closest selection when you press a key) and postsback when you press enter.
Did you try AutoPostBack="true" ?

Trigger JavaScript event when using Google auto fill on Firefox

I have a form, in which I am disabling the submit button until an user has typed in all the mandatory fields. I was initially using onkeyup to keep a tab on the mandatory fields and enable the button when all the mandatory fields are filled.
But I had users complaining that they filled in the form using AutoFill button on the Google toolbar and the submit button was still disabled.
I fixed this problem in IE by calling the onpropertychange event for each input element and it worked nicely.
But in Firefox, I couldn't find an event which will get triggered when the Google autofill button is clicked.
Help much appreciated.
Thanks for your answers. I had to respond quickly to this issue hence I used the 'setTimeOut()' function to check for mandatory fields and enable the submit button.
$().ready(function() {
CheckRequiredFields();
timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
});
function AutoMonitorMandatoryField() {
if ($("#btnSave").attr("disabled")) {
CheckRequiredFields();
timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
}
}
crescentfresh - I will look into the DOMAttrModified event and see if I can get it to work for me.Thanks
Judging from this google toolbar support thread, it seems autofill is not only a huge PITA for developers, but also very difficult to turn off. As of Aug 09 google claims it will honor the autocomplete="off" attribute on the containing form but as of today this feature does not seem to be released yet.
You used to be able to give your input elements non-sensical names (eg name="xx_Address_32423423") to confuse autofill (and thereby effectively disable it), but they've made autofill more "intelligent" by looking at substrings within your element names in order to determine if the field can be autofilled or not (again, judging from complaints in that thread).
In your case, you may as well roll with the punches and find an equivalent for onpropertychange for Firefox. Have a look at the DOMAttrModified event. Specifially, try checking the event.attrName property to see if the value has been changed by autofill:
function realOnChange(event) {
var attrName = event.propertyName || event.attrName;
if(attrName === 'value') {
// etc
}
}
The check for event.propertyName is to stay compatible with your current onpropertychange implementation (if that is even possible).
There's no need to add complex setTimeOut nor setInterval.
Just catch the "change" event of any refillable textbox of the form, go through every refillable field and if it's not empty hide the label

Categories

Resources