Develop Reference

Update Button Randomly Stops Working on WooCommerce Orders Page

The "Update" button in WooCommerce Order page randomly stops working and throws the following error in console everytime I click on the button:
An invalid form control with name='' is not focusable.
I read online that it has to do with some hidden but required input fields and HTML5 validation rules. But I went through all the input tags in the source code of the page when the button was not working and didn't find any such "hidden but required" input field.
I am looking for a quickfix right now, so is there anyway I can disable the browser from validating the form inputs, and allow the submit (Update) button to work always?
Any help would be highly appreciated.

Yes, I have also come around this bug while exploring the orders page on woocommerce. So, the workaround would be to loop all the form tags and add novalidate to them.

Fixed it using this script:
var badForms=document.querySelectorAll("form");
for(var i=0;i<badForms.length;i++){
badForms[i].setAttribute("novalidate","novalidate");
}

Over-shadowing label when pre-populating value to form

I'm using Materialized CSS and it works very well for me. However when I added more dynamic behaviour to my app, for example when I'm pre-populating form with values and appending them to the layout, here is the photo of that:
That happens only when I preset the value to form on/prior to page load (because my form html is generated by server side).
However if I were to click into the quantity field then quantity would go back to its place and it would stay there.
How do I make it so that it stays up even when I pre-populate the form value? Is there a class I need to add to it (label or input) or JavaScript or something that I can put out there.

If you want to pre-fill text inputs, use Materialize.updateTextField(); as the docs says

How do I add an element to form data before submitting it?

NOTE: This is a very specific question regarding Javascript and HTML forms. I have searched and cannot find an answer for this particular question, which involves the Dojo framework, and does not involve JQuery. Please do not mark this as a "duplicate" of a JQuery question, because it does not involve JQuery.
I need to submit a form by clicking a button which is of type "button", not type "submit". However, I also need to include the name of the button that was clicked, which is not normally submitted under these circumstances. The reason for this change (from the original "submit" functionality) is because there can be upwards of a dozen buttons on this dynamic form and if they are all "submit" buttons, the users will press "enter" to move to the next field and will be confused when the form does something unexpected (like submitting) instead of moving to the next field.
The method I have come up with to do this is to change all the button type='submit' tags to button type='button' controls. I then added this small Javascript fragment (we use the Dojo library so this is Dojo syntax):
query("button[type='button']").on("click",function(e) {
dom.byId("myform").submit();
}
This works but on the server side, it's not processed correctly. When a submit button is pressed, the form data (parsed by Chrome) looks like:
myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields
the last line is the button name and ID. When the form is submitted using the Javascript above, the last line is missing:
myInput1: 1
myInput2: Some Data
I need to add the last element to the form data before submitting it.
I have searched for this information but unfortunately all the existing examples use Jquery, which is not available to me in this case. How can I add this information to the form data using either Dojo or regular Javascript?

you could add the button element to the form on submit, or create an hidden input element and add that to the form
var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();

jQuery Validate plugin with styled radio and checkboxes

Here is my problem, I'm using jQuery validate to validate a form.
Problem is,I have special styling for my select boxes, I use the bootstrap select.
Now, this basicly re-generates an UL with a LI dropdown.
Is there a way with jquery validator too make sure one of these are selected, and to refuse the form if the first one is selected.
Anyone have any experience with what I wish to do ?
Thanks in advance !

Bootstrap select seems to be using the UL/LI combination to display something nice to the user but is still changing the value of the hidden select box for when it is posted.
What you will need to do is to modify the ignore handler in jQuery Validate, this is set to ignore all hidden fields by default.
I have had to deal with the same problem and written a custom invalid handler that allows you to write exceptions for fields hidden for this reason.
Check out the Validation Docs and find the bit about ignore handlers.

Ignoring Validators

I have a page where I use Javascript and a <input> button to hide the ability to add a new user to my database. To ensure that people enter in accurate info, I have added validators which works great. The issue, is that I also have a GridView and a search facility on this page and because I use Javascript to hide it, no click events will trigger because those textboxes attached to the validators don't have correct data in them. Is there a way to get it to ignore the validation unless the above button has been clicked?

I wrote this and had another crack at Google. My issue was that I could add CausesValidation="False" to the ASP:BUTTON control which worked, but I was using HTML to generate the Add User button instead of ASP.NET. Since I was using JQueryUI, I found it easier to search how to change from <input> to <asp:button> controls which I did by changing the javascript from:
$("#button").click(function () {
to:
$("input[id$='AddButton']").click(function () {
If I understand it correctly, <asp:button> is rendered into HTML as input[id=... etc. Adding in $ meant that that the script applied to any <asp:button> that ended in AddButton. I needed this since I had a few Search buttons on this page hidden in other Views and still wanted a consistent naming structure on the page. The alternative was to use the ^ symbol instead which would apply the script where AddButton is at the start of the ID.

Try setting validation group on that set of fields you want to validate. This should make the validators work only on that set of controls and no other.
Set the validation group on all input controls, validation controls and submit button.