How to get not focusable input form control by jQuery

Question

<form action="" method="post" enctype="multipart/form-data">
    <label class="btn btn-theme">
        <input type="file" name="file" value="" style="display:none;" required=""> click Me to choose file
    </label>
    <label class="btn btn-success">
        <input type="checkbox" name="checkbox" value="yes" style="display:none;" required=""> Are You agree ?
    </label>
    <br>
    <input type="submit" name="" value="Submit">
</form>

i want to show alert whenever user haven't selected any file or not agree and press Submit button in my given code. right now it giving "An invalid form control with name='file' is not focusable."

I know the reason behind it but how can i alert my user that you have not selected anything.
I do not like to use Jquery Submit or show them choose file icon.

Is there any way to get that element (with help of jQuery) on which browser trying to focus ?

Could your submit button just call a function that tests whether the input contains any data. You might also consider that since your input is required the submit button might not be available. — Dean, Oct 30 '17 at 18:20
@Dean , yes i can but in my actual code there are more than 20 required inputs. so its to lengthy to validate all of them. I just want to know that is there anything in jQuery which gives me that, the browser is trying to focusing which element of DOM. — santoshe61, Oct 30 '17 at 18:24

score 0 · Answer 1 · answered Oct 30 '17 at 18:42

0

This other issue seems to be similar. Can you add novalidate attribute to your form? This is seen here: An invalid form control with name='' is not focusable

answered Oct 30 '17 at 18:42

Dean

396
3
10

No, If I had to do this then simply i remove required attribute from all inputs. but i want to show alert or error if users does'n select file or check radio's. I have seen this answer, but it is not solving my problem – santoshe61 Oct 30 '17 at 18:47
You might have a look at this page: it offers some very elegent solutions to what you are trying to do: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation – Dean Oct 30 '17 at 18:52

score 0 · Answer 2 · answered Oct 30 '17 at 18:52

JQuery has a focus method that should do what you want.

Create a variable somewhere that will keep track of whether the user has clicked on an input.

var inputFocusOccured = false;

Then use the focus method to change the variable whenever a user clicks or touches an input.

$("input").focus(function(){
    inputFocusOccured = true;
});

Then when the user clicks submit have it check if the value is true or false

$("#SubmitBtn").click(function() {
    if(inputFocusOccured === false){
        alert( "Handler for .click() called." );
    }
});

How to get not focusable input form control by jQuery

2 Answers2