Re-enable submit button using js on correct inputs

Question

First thing, I went through all possible other solutions provided plus googled this problem too but those are either using jquery etc. or other techniques that I can't use to solve my problem here so please don't mark this as duplicate.

Now, the problem I'm facing is that I have a submit button that disables through javascript if the user inputs are not valid. I'm using disabled=true and css property "pointer-events" to disable all hover attributes too because I've colored animations for button.

The javascript function to check if the button should be disabled (shouldISubmit() js function) is through event "onMouseOver".

Now the problem is, if once the button is disabled, it disables the onMouseOver action and thus it doesn't call the shouldISubmit() function again and thus is disabled forever.

Is there some other way I can do the disabling or use any other action-event to call the function etc. so I can solve this problem.

This is function shouldISubmit() that disables or enables the button.

function shouldISubmit(){
            if(FNF){
                document.getElementById("regButton").disabled=false;
                document.getElementById("regButton").style.pointerEvents='auto';
            }
            else{
                document.getElementById("regButton").disabled=true;
                document.getElementById("regButton").style.pointerEvents='none';
            }
        }

This is my button.

<div class="button container">
    <br/>
    <button class="buttons" name = "register" onMouseOver=shouldISubmit(); id="regButton">
        Register
    </button>
</div>

instead of disabling the button, just run a JS function when the button is clicked which validates the data, and decides whether to proceed with whatever the button's default action is supposed to be. That's a pretty standard way. Additionally if you use HTML5 validation attributes on your fields wherever possible then you'll get on-the-fly validation of your form as the user types. You could also use events on your inputs where the value changes or the field loses focus to trigger on-the-fly validation, which will improve the user experience by validating as they go along, not at the end. — ADyson, Jan 17 '19 at 16:45
@ADyson Can you give some example of the deciding code? Like it's a registration page and if user inputs are not valid, it shouldn't allow the user to proceed. So I don't see any other thing than disabling the button. — Ramsha Khalid, Jan 17 '19 at 16:50
"Can you give some example of the deciding code" ...well how do you decide now? I see in your shouldISubmit function you've got `if(FNF){` but I don't know where `FNF` comes from. I guess that's a value saying whether the validation passed or not? If so then you just need to run the same routine to set that value, and then on that basis either continue with whatever the button is supposed to do, or display an error — ADyson, Jan 17 '19 at 16:53
P.S. if your button is just a standard "submit" button, which it appears to be, then returning `false` from an "onclick" event handler should stop it from starting the postback. You can google that topic separately anyhow. — ADyson, Jan 17 '19 at 16:56
@peinearydevelopment that question is using asp.net and I'm not allowed to use any frameworks. Thanks — Ramsha Khalid, Jan 17 '19 at 17:14
@RamshaKhalid It might use asp.net, but the answer isn't dependent on that framework. " Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). You can however wrap the disabled element with a DIV and listen to the event fired on that element instead." has nothing to do with asp.net and it could solve your problem. — peinearydevelopment, Jan 17 '19 at 17:16

score 1 · Answer 1 · answered Jan 17 '19 at 17:17

Instead of calling *shouldISubmit()* from the button itself, I tried calling it from the validation function and it worked. Thank you all for giving me ideas on how to solve this problem. I am posting this answer for future viewers who might find the same problem since I didn't find any other simple answer to such question.

Re-enable submit button using js on correct inputs

1 Answers1