0

Found lots of answers for this in jQuery, but I want to do it in pure Javascript. This code doesn't work. It enabled when all the fields are filled, but enables again when I remove the text in one of them. What is wrong with this?

<form action='' method='post'> <input type='text' class='req' id='required_0' onkeydown='enableSubmit()' required> <input type='text' class='req' id='required_1' onkeydown='enableSubmit()' required> <input type='text' class='req' id='required_2' onkeydown='enableSubmit()' required> <input type='submit' value='Submit' disabled> </form> <script> function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let disabled = false; for (var i = 0; i < inputs.length; i++){ let changedInput = document.querySelector('#required_' + i); if (changedInput.value.trim() == "" || changedInput.value == null){ btn.disabled = true; console.log("Button disabled"); } else { btn.disabled = false; console.log("Button enabled") } } } </script>

EDIT: Thank you for all the answers, I didn't think I would get that many - so I don't really know who I should choose as "answer" for the cred. Please comment below with your pick (and why) to help me choose.

Improve this question
2
  • “What is wrong with this?” - you are disabling the button inside your loop, so of course that will happen after the first input field you encounter, that satisfies your conditions. You need to use a flag, toggle that based on the checks of your input fields, and then set the button state after the loop, based on that flag. Commented Jul 7, 2020 at 9:06
  • fun fact: because you marked all the text fields as "required", the native HTML5 validation will prevent form submission unless all fields are filled. You need a "novalidate" attribute on the form. Commented Jul 7, 2020 at 9:24

8 Answers 8

Reset to default
3

You cannot fix this with a onkeydown, cause it will not correctly trigger the event. onkeyup does the job. Look to a working variant.

I've a bit optimised your code.

  • You already filtered out the inputs with let inputs = document.getElementsByClassName('req');
  • on first empty field we break the loop with break;

 function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let isValid = true; for (var i = 0; i < inputs.length; i++){ let changedInput = inputs[i]; if (changedInput.value.trim() === "" || changedInput.value === null){ isValid = false; break; } } btn.disabled = !isValid; }
<form action='' method='post'> <input type='text' class='req' id='required_0' onkeyup='enableSubmit()' required> <input type='text' class='req' id='required_1' onkeyup='enableSubmit()' required> <input type='text' class='req' id='required_2' onkeyup='enableSubmit()' required> <input type='submit' value='Submit' disabled> </form>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Good answers @Max Kaps 4bis.nl! What I can add is that the code would not response on mouse events. I can cut or insert with a mouse.

My updated version

 function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let isValid = true; for (var i = 0; i < inputs.length; i++){ let changedInput = inputs[i]; if (changedInput.value.trim() === "" || changedInput.value === null){ isValid = false; break; } } btn.disabled = !isValid; }
<form action='' method='post'> <input type='text' class='req' id='required_0' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required> <input type='text' class='req' id='required_1' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required> <input type='text' class='req' id='required_2' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required> <input type='submit' value='Submit' disabled> </form>

Improve this answer

Comments

2

In your loop, you are enabling the button as soon as you find one input which isn't null or empty. You need to change your code to check that all fields are completed.

You could do this several ways. But easiest would be to invert your logic. Set the button to be enabled. Then only disable it if any field is incomplete.

function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); btn.disabled = false; for (var i = 0; i < inputs.length; i++){ let changedInput = document.querySelector('#required_' + i); if (changedInput.value.trim() == "" || changedInput.value == null){ btn.disabled = true; console.log("Found an incomplete field, set disabled to true"); } } }

This might seem a bit ugly, because you are setting the button state twice. So another common approach is to use a flag instead.

function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let disabled = false; for (var i = 0; i < inputs.length; i++){ let changedInput = document.querySelector('#required_' + i); if (changedInput.value.trim() == "" || changedInput.value == null){ disabled = true; console.log("Found an incomplete field, set disabled to true"); } } btn.disabled = disabled; }

However, this will still not work perfectly, because you are calling the check on key down. When the key is pressed, the value of the field is not yet updated, and so the first time you type in the final input, the button will still be disabled. Better to use on key up. I've updated this in the fiddler below.

Fiddler link here - https://jsfiddle.net/8yaenwx7/

Improve this answer

4 Comments

Don't look like it works. I have changed my code to what I previously had though, very similar to yours. See my edit of the post.
Your code doesn't look like mine. Your if else condition will mean the button is always disabled or enabled based on the last field you check.
your link to fiddle goes to a home page of jsfiddle and not to your example
@maggiato if your code is still not working after making the change, it might be because you are handling the key DOWN even not the key UP event. Key down will not yet have updated the field, so it might be better to use key up event. Or if you really need to use key down, then you can get the new value from the event and use that, but it will be a bit more fiddly.
2

My input - while we are checking let's disable the button until we are sure about.

 function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let isValid = true; btn.disabled = true; for (var i = 0; i < inputs.length; i++){ let changedInput = inputs[i]; if (changedInput.value.trim() === "" || changedInput.value === null){ isValid = false; break; } } btn.disabled = !isValid; }
<form action='' method='post'> <input type='text' class='req' id='required_0' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required> <input type='text' class='req' id='required_1' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required> <input type='text' class='req' id='required_2' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required> <input type='submit' value='Submit' disabled> </form>

Improve this answer

Comments

1

This should fix your problem:

 function enableSubmit(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let isValid = true; for (var i = 0; i < inputs.length; i++){ let changedInput = document.querySelector('#required_' + i); if (changedInput.value.trim() === "" || changedInput.value === null){ isValid = false; } } btn.disabled = !isValid; }
<form action='' method='post'> <input type='text' class='req' id='required_0' onkeydown='enableSubmit()' required> <input type='text' class='req' id='required_1' onkeydown='enableSubmit()' required> <input type='text' class='req' id='required_2' onkeydown='enableSubmit()' required> <input type='submit' value='Submit' disabled> </form>

Improve this answer

Comments

1

In the above approach there is a loophole. Because as you loop from first field to last and even if I find only the last field filled it will enable the button. I modified the script and got it working.

function enable(){ let inputs = document.getElementsByClassName('req'); let btn = document.querySelector('input[type="submit"]'); let i; for(i = 0;i < inputs.length;i++){ let change = document.querySelector('#required_'+i); if(change.value.trim() == "" || change.value == null){ break; } } if(i == inputs.length) btn.disabled = false; }

I have just modified the loop by breaking if the input is null or empty.

Improve this answer

Comments

1

First, let's tweak your HTML a bit. Most importantly, novalidate will prevent native constraint validation from blocking form submission unless all fields are filled (because they are required. Also, don't forget to name your fields, especially for direct HTTP submission.

<form name='myForm' novalidate action='' method='post'> <input name='field0' required> <input name='field1' required> <input name='field2' required> <input type='submit' value='Submit' disabled> </form>

Now for the JavaScript, we can actually use native validation to count how many fields are valid. We want less than 3 and, I assume, at least one ?

const myForm = document.forms.myForm // this is more efficient than adding a listener on each field separately myForm.addEventListener('input', enableSubmit) function enableSubmit() { const button = myForm[3] // get all the fields in an array const validInputCount = [...myForm.elements].slice(0, 3) // then count how many are valid .reduce((sum, input) => sum + input.checkValidity(), 0) // finally apply your custom rule button.disabled = validInputCount > 0 && validInputCount < 3 }
Improve this answer

Comments

1

Here is a non-javascript solution with pure CSS. Less code to handle.

I added a onsubmit false on the form just as an example, just as I added input:invalid as a style. I also added some default text to show case the validation.

The pattern is validated through regex:
.* means any number of characters, including no characters.
\S is catching non-whitespaces

form:invalid > input[type="submit"] { opacity: 0.5; pointer-events: none; } input:invalid { background-color: red; }
<form onsubmit='return false' action='' method='post'> <input type='text' required pattern=".*\S.*" value="text"><br/> <input type='text' required pattern=".*\S.*" value=" text text "><br/> <input type='text' required pattern=".*\S.*"><br/> <input type='submit' value='Submit'> </form>

You could remove form:invalid > input[type="submit"] { and let the browser handle any errors. It wont submit unless all the requirements are fulfilled for all inputs.

input:invalid { background-color: red; }
<form onsubmit='return false' action='' method='post'> <input type='text' required pattern=".*\S.*" value="text"><br/> <input type='text' required pattern=".*\S.*" value=" text text "><br/> <input type='text' required pattern=".*\S.*"><br/> <input type='submit' value='Submit'> </form>

Improve this answer

3 Comments

Hefty! Have not heard about this one before.
Also, is there any pros/cons using this method compared to the javascript method?
In my book, less code to care about and no real cons in the HTML structure you provided. There could be exceptions but those could be solved by calling onsubmit on the form.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.