Enter key press for focus change and check input before submit form

Hi A zad,

The issue arises because of how the UseSubmitBehavior property interacts with JavaScript. When UseSubmitBehavior="false", it disables the default form submission behavior, allowing the JavaScript focus change to work but causing your validation function (CheckInputData()) to not behave correctly.

To handle both scenarios (focus change and input validation) effectively, you can:

1. Handle the Enter key press manually to prevent the form submission.
2. Call the validation and focus change logic within the same event handler.

Here’s an updated approach to ensure both the Enter key press moves the focus and input validation works before form submission.

Updated Code:

JavaScript:

ASP.NET Form:

Explanation:

1. EnterPressFocusChange(a, event):

   • It checks if the Enter key (key code 13) is pressed.
   • If pressed, it prevents the default form submission (event.preventDefault()), then moves the focus to the next input element.
   • This prevents the Enter key from triggering the button click prematurely.

2. CheckInputData(a):

   • This function validates the form input. If the data is valid, it returns true and allows the form to submit.
   • If the input is invalid, it alerts the user and returns false, preventing form submission.

3. UseSubmitBehavior="false":

   • We keep UseSubmitBehavior="false" to allow our custom JavaScript logic to handle form submission. Without it, pressing Enter would trigger the form submit, bypassing your validation logic.

Benefits of This Approach:

• The Enter key press moves focus between elements without submitting the form.
• The validation function works properly before the form is submitted.
• You have full control over the form submission behavior, including preventing unwanted submission when validation fails.

This way, you can handle both the focus change and the input validation before submitting the form.

I already mention that  when I use button property UseSubmitBehavior="false" then change focus task working but checking input function always return true and button onCkick function calls.

It looks like you’re trying to handle both focus change on Enter key press and input validation before form submission. The challenge is that UseSubmitBehavior="false" prevents the default form submission, while UseSubmitBehavior="true" triggers the form submission on Enter key press.

To achieve both tasks, you can handle the Enter key press event in JavaScript and manually trigger the button click if the input is valid. Here’s an updated version of your code:

In this code:

1. The EnterPressFocusChange function prevents the default form submission when the Enter key is pressed.
2. It changes the focus to the next element in the form.
3. If the focused element is the textbox (tb1), it manually triggers the button click after validating the input.

Thanks