Develop Reference

onblur event fires only on alternate input fields in Firefox

After each form input element, I need to do a verification using the same script.
I used onblur=myFunction("name") (where name is the name= attribute for the form field) in each form element so when the user presses <tab> the cursor advances to the next entry field.
The problem is that Firefox (Linux 93.0 - 64 bit) fires the onblur event ONLY on odd-numbered form input fields. The even numbered ones lose focus without executing the event handler.
Sometimes, but not always, I can force the event to fire by clicking on a different form input field, or rotating out and back into the form. This is very consistent.
Here are two example sequential fields from the real form, 'fname' fires the event, 'lname' does not.
There is a total of 17 named input fields. The style for these fields does not reflect the "unfocused" state after the cursor exits the field either.
<label for="fname" class="shipping">First Name</label>
<input type="text" class="shipping" name="fname" id="fname" maxlength=24 size=20 placeholder="First Name" autofocus onBlur=field_check("fname")>
<label for="lname" class="shipping">Last Name</label>
<input type="text" class="shipping" name="lname" id="lname" maxlength=48 size=30 placeholder="Last Name" required onBlur=field_check("lname")>
How to fix this issue?

Thank you to those who responded, even though nobody had an answer. I did a lot of testing and found that the problem is interference between the CSS styles and the inline onBlur, onChange, etc. When these are removed all works as expected although I can no longer determine when a field has been completed. Testing, I found that Firefox (Linux and Windows) will respond to every second event, so alternate lines do not get styled and do not report data entry. Chrome on Windows will hang after the third field is entered and the pop up cannot be dismissed without closing the browser. An old version of Internet Explorer (!) worked exactly as expected but I couldn't test either Edge or Safari since I don't have them installed here.
Overall, there seems to be some disconnect between the documentation and the implementation on mainstream browsers but I have run out of time to try and find it so I'll have to find a "plan B".

Not able to use the html default required attribute

I am using jquery-tagsinput-revisited plugin that displays the data from the database and performs the functionality of autosuggestion and tag. The only issue that I am facing is that it does not go well with HTML default attribute required.
Ideally, if a required field is empty and we try to submit a form it gives a message telling the user to fill that field, but with this plugin, the required keyword is not displaying the message.
My original i/p field is
<input id="value" name="tags-4" type="text" required>
The plugin is replacing this field with its own code and removes the required attribute
I tried to modify the options section by adding the following attribute
$('.tagsinput#tags').tagsInput({
required: required,
});
but still, I did not get the message.
I want if the field where this plugin used is left empty the user should get a message like this
Can anyone please tell me how to do it ?

how to avoid or disable autoComplete in text input for Redux form?

i am using ReactJS and ReduxJS to construct my application .
I created my form using Redux-Form and there are many text input and for one of them ,i am using onkeyDown event to increase and decrease number in my text
so when i click up arrow or enter first digit the text is auto
completed with previous date entered(history) that disturb when i
click another up arrow
[Hint] I tried AutoComplete=off and did not work

You just have the attribute cased incorrectly. You can use the following 3 attributes on the input:
autoComplete="off"
autoCorrect="off"
spellCheck="off"
Notice that each are camel case.

Seems like autoComplete="off" no longer works in Chrome. A workaround is to either set autoComplete="new-password" or a value not supported: autoComplete="something-unsupported".

i have tried all of the above example but this one is worked for me autoComplete="off"

innerHTML stripping dynamically added characters

I'm building a form that displays a preview and I'm having issues with innerHTML stripping dynamic content from a text input field.
The dynamic content is coming from the Inputmask-multi Jquery plugin, which forces phone number formatting. See an example here: http://andr-04.github.io/inputmask-multi/en.html
Firefox and Chrome are stripping the proper formatting and just display the numbers entered by the user.
Form input code:
<label for="wphone_input" id="wphone">Work Phone:<span style="color: #ff0000">*</span><br>
<input type="text" name="wphone_input" id="wphone_input">
</label>
I'm grabbing the value of the input like this:
wphone = frm.wphone_input.value;
Then I'm setting the display like this:
document.getElementById("wphone2").innerHTML = wphone;
Can someone tell me how I might display the input value with proper formatting included?

I am on Chrome. I went to the URL you listed, typed a bunch of 5s in the box, and opened a console window (Note, the input is highlighted so $0 is the input box):
$($0).val(); // 55555555555
$($0).data().inputmask.autoUnmask = false;
$($0).val(); // +555-55-55-5555;
So there is probably an autoUnmask option you set when initializing the input mask.

Placeholder vanish after click on Reset button in IE8

I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.
Here is my reset function ...
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
}
My form is like that ....
<form name="addCandidateForm" id="addCandidateForm" method="Post">
<input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
.....
.....
<span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>
First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.

I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.
However, it sounds to me like you need to use a better placeholder script.
If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.
This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.
For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.
So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.
Hope that helps.

Change your resetCandidateData function to
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
$.Placeholder.init();
}
It should restore the placeholders.