disabling a submit button till validation - dojo

Is there a way using dojo/dijit to disable the submit button till all the fields in a form are valid. Kind of like having a dojo > method > onChange inside the form? So the submit button only becomes enabled when all the form elements have meet their criteria?

Are you using a dijit.form.Form widget as your form? If you are, I would suggest connecting to the Form's onValidStateChange event. The docs for this event specifically state your use case:
onValidStateChange
Defined by dijit.form._FormMixin
Stub function to connect to if you want to do something (like disable/enable a submit button) when the valid state changes on the form as a whole. Deprecated. Will be removed in 2.0. Use watch("state", ...) instead.
The best way to see what events are available for a given widget is to look at the API Documentation for the widget you are interested in under the "Event Summary" heading. The dojocampus reference documentation often leaves out examples for references to some of the more obscure features of the widgets.

I would suggest to have a hidden button which will submit the form. When you click visbile button run a javascript function that validates all the input and then clicks on the hidden button to submit the form. Please find the pseudo code below
<form action="register">
<input dojoType="dijit.validation.TextBox"/>
<button onClick="validateall()">submit</button>
<button id="submitForm" type="submit" hidden="true"/>
</form>
function validateAll(){
if(AllOk){
clearErrorMessage();
dojo.byId('submitForm').click();
}else{
showErrorMessage();
}

Related

How to continue filling a form that has a vue datepicker cypress?

I try to fill a form using cypress. That form is built with Vue and it looks like this
The problem is, dispatch date is a date picker that I fill using cypress type() command. For example
cy.get('#dispatch-date').type('22-10-2022');
However, this is how the form looks like after the type command
the drop down menu of the date picker covers the rest of the form not allowing cypress to continue the form filling. I tried clicking {enter} after typing the date but it submits the form. I also tried the {force:true} option, but it makes the test fails because the datepicker is actually a <div> and not an <input> tag. Any ideas how to solve this problem?
It's going to depend on the exact datepicker you have in the app, or more precisely the way the user interacts with it.
For example if it's the vue2-datepicker you can probably just tab off the control to trigger it's update.
cy.get('#dispatch-date')
.type('{selectAll}22-10-2022') // {selectAll} if not empty
.trigger('keydown', {keyCode: 9, which: 9})
cy.get('#dispatch-date')
.should('have.value', '22-10-2022')
Note a click on the <body> element will close the picker, but the value is not updated to v-model.

vue-table-2 change search filter to fire on button click instead of keystroke

working with https://github.com/matfish2/vue-tables-2 with Vue.js v2.6.11
Hello, a junior dev learning Vue.js (coming from React world). I'm trying change the filter/search box to fire on the click of a button I created, rather than after every keystroke (its default functionality). Eventually, I would also like to apply my own custom filters that are selected from a dropbox to apply when my search button is clicked.
I can't find the code where the search event is being triggered in order to redirect it to my button press. If anyone has any insight working with VueTables2 and could help point me in the right direction, it would be very much appreciated. Thanks!
There's a way to do this using ref and a function, documented here
https://matanya.gitbook.io/vue-tables-2/methods
#1. Add ref to table
<v-client-table :columns="columns" v-model="data" :options="options" ref="myTable">
#2. add method
methods: {
customFilter: function(){
this.$refs.myTable.setFilter('A')
}
#3. add method as event listener
<button #click="customFilter">Filter 'A'</button>

Apex buttons in Interactive Reports break when built-in search filter used

In Apex 5.0.2. I have created a copy-to-clipboard function in my interactive report. The user can copy the value of a hidden column by clicking on this button that is set in a column and is repeating in every row (see image below).
The copy column is edited with an HTML Expression which does the following:
<button class="copytoclipboard
t-Button
t-Button--noLabel
t-Button--icon
t-Button--stretch" customid="#COPY#" type="button">
<span class="t-Icon fa fa-copy" aria-hidden="true">
</span>
</button>
My Dynamic Action with the event 'click', jQuery selector .copytoclipboard has 2 true actions. 1 sets the value of a page item (text_field) by getting the customid from that row with:
this.triggeringElement.getAttribute("customid")
The second one then copies this value to the clipboard.
This works fine and when I inspect the button element, I see the correct HTML output, with the correct value. However, as soon as I use the built-in search filter in the Interactive Report, my button breaks and clicking this button does not trigger my dynamic actions anymore, however, inspecting the element still returns the expected HTML output.
Can somebody please clarify why this is happening, and how this could be avoided?
Thank you in advance.
I found the solution. I had to put the Event Scope of the Dynamic Action to Dynamic, which is set to Static by default. Using the built-in page filter does a PPR of the report, thus when static, the event handler is longer bound to the triggering element.
Static (default) - Binds the event handler to the triggering elements
for the lifetime of the current page, but will no longer be bound if
the triggering elements are updated via Partial Page Refresh (PPR).
Dynamic - Binds the event handler to the triggering elements for the
lifetime of the current page, including any triggering elements that
are recreated via Partial Page Refresh (PPR).
Once - Binds the event
handler to the triggering elements for a once only event.

Submit checkboxes with "Check All" button and clear validation error

Through much trial and error (mostly error), I have managed to incorporate jQuery Validate, Bootstrap 3 (using Popovers for validation messages), and DataTables to create I suspect a fairly common scenario:
A DataTable that contains a column of checkboxes, and offer a "check all" checkbox that selects all the checkboxes across pagination and filtering in a DataTable, and apply jQuery Validate to ensure a user doesn't submit without choosing at least one checkbox.
Here's a link to a live example of what I'm doing: http://live.datatables.net/lomelono/2/
It works (the script picks up all the checked checkboxes (either via the check all checkbox, or if manually chosen, and across pagination and filtering on the DataTable), and will validate if no checkbox is chosen.
What it doesn't do is:
Clear the validation error if the check all checkbox is chosen
Another odd side effect by using .appendTo() to ensure all checked checkboxes across pagination/filtering are chosen for submit is all the checkboxes (checked or unchecked) will appear at the bottom of the form before submit (the submit is disabled on the example so you can see the behavior).
Obviously I know just enough jQuery to be dangerous, but is there a better way to submit all the checked checkboxes, AND ensure client-side validation works correctly? Of course, I have a server-side catch, but ideally we want to inform the user BEFORE they submit.
I think I am really close to solving this, and hopefully someone can point me towards the finish line, that will hopefully benefit others who have this kind or similar sort of scenario.
SOLUTION
You may need to turn those <input type="checkbox"> that are checked and don't exist in DOM into <input type="hidden"> upon form submission.
For example:
$("#emailCompose").validate({
submitHandler: function(form) {
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function(){
// If checkbox doesn't exist in DOM
if(!$.contains(document, this)){
// If checkbox is checked
if(this.checked){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
}
});
//form.submit();
},
// ... skipped ...
});
DEMO
See jQuery DataTables: How to submit all pages form data for more details and demonstration.

How to disable the button if some input field is not filled?

IBM web experience factory uses dojo library, I am wondering if the I set <input type="text" name="usrname" required> in the consumer model, does the button still work if the input is not filled?
Well, HTMLFormElement has a method called checkValidity() which you can use.
So, in your case, you could use the :input selector with dojo/query to query all input elements inside a form (includes buttons, checkboxes, textfields, text areas and select boxes) and then use the onChange event to check if the form is valid and change the buttons disabled attribute.
For example:
query("[name=myForm] :input").on("change", function(evt) {
var isInvalid = !evt.target.form.checkValidity();
query("button[type=submit]").attr("disabled", isInvalid);
});
Now all you need to do is to make sure that your button is initially disabled/enabled depending on the initial state of the form.
A full example can be found on JSFiddle: http://jsfiddle.net/j8L6j77g/