Question 219879 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to handle "input is not focusable" in javascript form validation?

I have this control

<div class="conico">
  <input class="form-control" readonly id="fileName"/>
  <input class="form-control" type="file" style="display:none;" required="xxx" id="fileSelect"/>
  <label for="xxx" class="ico">
    <img src="/images/icocamera.svg">
  </label>
</div>

I want to fill a text box with the name of a file. In my code above, I have an icon for every file. When an icon is pressed, the corresponding file name should populate the input.

This works fine, however, when the user doesn’t select a file, then submits they get an error:

input is not focusable

How can I handle this error with a custom javascript function?

Tags:

2

Answers


  1. 0

    To handle the "input is not focusable" error in JavaScript form validation, you need to understand its cause and implement a solution accordingly. This error usually occurs when you’re trying to set focus on an element that cannot receive it, such as a disabled or hidden input field.

    Here’s a concise step-by-step approach to handling this issue:

    1. Identify the source of the error: Examine your code and identify which part triggers the "input is not focusable" message. It could be due to attempting to set focus programmatically using element.focus(), or when submitting a form with invalid inputs.

    2. Check if the input can receive focus: Before setting focus on an element, ensure it’s enabled and visible by verifying its properties like disabled (should be false) and display/visibility (shouldn’t be set as ‘none’ or ‘hidden’).

    3. Conditionally handle the issue: If an input isn’t focusable due to being disabled or hidden, decide how you want your script to react. You might choose either of these options:

    • Enable/disable/hide/show elements dynamically: If certain conditions should control whether an input is interactive or visible, adjust those conditions accordingly before setting focus.
    • Display custom error messages/alerts: Instead of focusing on inaccessible fields directly, display descriptive error messages near them so that users are aware why they cannot interact with those specific inputs.
    1. Implement conditional logic in your code:
    • To enable/disable elements dynamically based on certain criteria:
    var myInput = document.getElementById('my-input');

if (/* some condition */) {
myInput.disabled = true; // Disable
} else {
myInput.disabled = false; // Enable
}
    • To show/hide elements depending on specific circumstances:
    var myElement = document.getElementById('my-element');

if (/* some condition */) {
myElement.style.display = 'none'; // Hide
} else {
myElement.style.display = 'block'; // Show
}
    • To display error messages instead of setting focus directly:
    var errorMessageElement = document.getElementById('error-message');

if (/* condition that triggers the "input is not focusable" error */) {
errorMessageElement.textContent = 'Your custom error message';
// Optionally, you can also add CSS styles to highlight the issue.
} else {
errorMessageElement.textContent = ''; // Clear any existing errors.
}

    By following these steps and adapting them as per your specific requirements, you can effectively handle the "input is not focusable" situation in your JavaScript form validation. Remember to test thoroughly to ensure your implementation works seamlessly across various scenarios.

    Login or Signup to reply.
  2. 0

    fileName needs required = true, not the file selector.

    Then you can do something like this:

    $( "form" ).on( "submit", function( event ) {
  if ( $( "#fileName" ).val() ) {
    return;
  }
 
  console.log('not valid')
  event.preventDefault();
} );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search