Adobe Livecycle - form submit occurring before field exit - javascript

My office is working with LiveCycle ES4 and I'm kinda new to it. I have a form that contains some custom validation javascript which gets called in the submit event of a submit button, which works fine. The form is deployed in Livecycle Workbench, which replaces the in-form submit button with the workbench 'complete' button.
We're running into a problem where if a user enters data in one of the required fields, then clicks the Workbench Complete button, the exit event for that field doesn't fire, which means the rawValue is not set to the value the user entered. So when the validation runs as part of the submit event, it fails, even though the user has entered text in that field.
Is there some way to change this up so it shifts focus out of the current field when clicking the Workspace button?

There are ways the ensure that this does not happen.
One of the ways to do this is to place an if statement in the submit button code so that the form submission happens only when the rawValue of that field is populated. If the if statement does not evaluate to true, the submit code does not execute and you dont have to worry about this problem.
Also, If the field is not populated, your code can also set the focus to that field so that the user is automatically navigated to the field in question.
Hopefully this strategy helps. Please let me know if you have any other questions.
Thanks,
Armaghan.

Related

Handle form submission (by pressing enter etc.) from particular form fields only

I have a complex form with many different types of fields and a submit button. As far as I'm aware, a form can be submitted by clicking the submit button, by pressing Enter in certain form fields (for example text input fields), and on mobile devices by pressing the submit button on the on-screen keyboard. There may be more ways to submit the form that I'm not aware of.
I would like to register a separate (JavaScript) submit handler that applies when the form is submitted only within a certain section of the form. Pressing the submit button or submitting the form from a form field outside of the special section should call the regular submit handler, but submitting the form from a form field inside the special section should call another handler. One particular challenge in my case is that some of my form fields are rendered by third-party React components, and I don't have the possibility to control their DOM.
I could come up with ideas that go in the following directions:
Somehow find out from which form element the form was submitted, and check whether that element is within the special section. The problem is that I have not been able to find a way to detect the originating form field on the submit event.
Use nested forms and put the special form group in its own form with its own submit button and submit event handler. The problem is that there seems to be no supported way of nesting forms in HTML.
Use the form attribute on each input field within the special form group and point it to a separate form with its own submit button and submit event handler. I am assuming that this would produce the desired behaviour. Unfortunately, I cannot add this attribute to all input fields, since I don't control their DOM.
React to keydown events with key set to Enter. The first problem is that pressing Enter only submits the form in certain cases. For example, pressing enter in a text input submits the form, but pressing enter in a textarea or a button input does not. In some cases such as a file input (which sometimes consists of a text field and a button) I'm not even sure and the behaviour between browsers is probably inconsistent. So I don't know under what conditions even to call the submit handler. The second problem is that I assume that this does not take other submission methods into consideration, such as the submit key on touch devices.
Is there a good way to catch the form submission from within a certain section of the form only?

Page does not submit after clicking on lower half of button when removing validations

I am facing an issue in my Struts2 application. Basically, on textfields, I have validations such as missing value, wrong value etc. There is then a button below these fields which submits the form when all validations are successful.
Suppose, I blur out of a textfield with a wrong value, the validation fires an error below this textfield. Now, when I supply a correct value and directly click on the upper half of the button, the validation clears and the page also submits along with it simultaneously. However, when I click on the lower half of the button, the validation just clears but the page does not submit at all. This behaviour is consistent across the application.
Now, the QA team has raised a defect for this as it could hamper user experience.
Could anyone suggest a possible fix for this other than calling the submit button click event on the mousedown event? We tried that but its causing side effects.
I cannot show the exact code as there are many collaborating CSS classes for this scenario which could cause confusion. If anyone could try to give a brief solution, it would be extremely helpful!
You need to perform the same function regardless of what part of the composite is invoked. If you click a submit button it should submit, if you click reset button it should reset. If you click cancel it should return to the previous page. Different functions of the same control mislead the user experience because it doesn't perform expected behavior of the button.

Angular: Pressing Enter Submits Empty Form Regardless of Values

This may be an iterative question and answer process because I'm not sure which code to paste. I have a custom, advanced search form (which uses ng-submit) that passes a query object into a controller method and calls a service. When the user has entered some input into one or more fields, pressing the submit button (which uses ng-click) successfully calls the methods and submits the query. However, if the user presses enter to submit the form, those same methods are called, but the query object is missing the bound values of the input fields. I've stepped through with breakpoints and have verified that all of the above is what's happening, but am unsure where the problem lies. Is there a difference in Angular's data binding process between ng-click and pressing the enter key? Do I need to call prevent default somewhere? Let me know what code I need to add to this post to help with troubleshooting. Thanks!
For anyone who may encounter this problem in the future, it turns out that the problem was that the enter key was firing both the Clear and Submit buttons, as the default behavior for a button is submit. It just happened to be firing the Clear button first, otherwise we never would have noticed the problem. The solution was simply to add "type=button" to the clear button.

Submit Lotus Notes XPage form from outside with plain JS

I have a simple Lotus Notes XPage with only an editable RichText dialog that is embedded in a bigger form using an iframe.
The bigger form has a submit button, which triggers some javascript and finally a notes agent which saves all non-richtext values that are inside the bigger form.
Of course the user shall not have to use two submit buttons, so I won't have a (visible) submit button for the XPage. Instead, I want to use javascript to tell the iframe to submit the form.
Using iframe.document.forms[0].submit() does not work - the form is indeed submitted to the Notes server, but XPages won't save the changes I made.
Using a simple XPage button with the action "Save Data Sources", saving works like a charm, but I don't want the user to have to click two buttons in the correct order.
I also tried the following javascript code to fill some invisible fields with the values that IBM submits to the server, but this does not help either:
iframe.document.forms[0].elements["view:_id1:inputRichText1_h"].value = iframe.document.forms[0].elements["view:_id1:inputRichText1"].value;
iframe.document.forms[0].elements["view:_id1:inputRichText1_mod"].value = true;
iframe.document.forms[0].elements["$$xspsubmitid"].value="view:_id1:_id4";
iframe.document.forms[0].elements["$$xspsubmitscroll"].value="0|0";
iframe.document.forms[0].submit();
So now I ask you: how to correctly submit that form content, without the user actually clicking the XPages button? Can I programmatically trigger a click on that button, which would be indifferent from a human actually clicking, except for the human?
have an ordinary div with a fixed id and inside this div have a computedtext that will compute the clientsideid of the "save button" and return that inside the div
and use this clientside js code to do the actual click
var id=iframe.document.getElementById("button").innerHTML
var button=iframe.document.getElementById(id)
button.click()

Validation error with JotForm template

A client sent me a form template they had created using https://jotform.com to implement on their WordPress site. The form template is supposed to hide part of the form until the user clicks the next button. At which point a script is supposed to validate all of the input fields the user has presumably filled out and then display the rest of the form. While I have successfully managed to get the form to display the next part of the form when the user clicks next, it fails to validate the input fields.
It's kind of difficult to explain without a huge block of text so it is probably easier to show you:
The original working template that the customer sent me:
http://www.loftist.com/jotform/List_Your_Loft.html
The problem child:
http://www.loftist.com/?page_id=78
If you just click on one of the input fields and then click elsewhere on the page, the input fields successfully return a validation error message and prevent the user from clicking on the next button. However, if you simply click on the next button than the next set of fields get displayed.
Any thoughts? What am I doing wrong here? Im convinced this must be a really simple problem but Im not sure what it could be.
I don't understand the problem. Your first link, the original template, works for me with all the validations in place. The problem child on the second link is not a jotform form, and it doesn't have any paging stuff.
Do you mean jotform on your first web page is not working correctly? What does this have to do with the second form on your second link?

Categories

Resources