Submit button clickable when form is filled in

Question

I want to create an authentification page and the design is almost finish :)

I just want to add a last thing to my page.

I want that if the form is not fully completed (a box is missing for example), the submit button is grey and not clickable. And if the whole form is filled in, the button become blue and clickable.

The problem is that I don't know JavaScript (I'm beginner)...

Here is my form :

<form method="post" action="traitement.php">
   <div class="text">
      <div class="group">
         <label for="username">Téléphone, email ou nom d'utilisateur</label>
         <input type="text" name="username" id="username" autofocus required class="champs" />
      </div>
      <div class="group">
         <label for="password">Mot de passe</label>
         <input type="password" name="password" id="password" required class="champs" />
      </div>
      <input type="submit" value="Se connecter" id="button" disabled="disabled" />
   </div>
</form>

Do you think it's possible with only CSS ?

Can you help me please ?

Thank you in advance :)

Please show us what you've tried. If you don't know Javascript please learn first, then come back if you struggle finding a solution. We can't code for you. — djcaesar9114, Jun 06 '20 at 12:31
It is a duplicate of this post - https://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled. Check it for the answer instead... — HoratioNullbuilt, Jun 06 '20 at 12:31
Does this answer your question? [Disable/Enable Submit Button until all forms have been filled](https://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled) — Dave, Jun 06 '20 at 19:53

score 1 · Answer 1 · answered Jun 06 '20 at 12:47

There is a simple solution to this and it looks like this

<form method="post" action="traitement.php" id="loginForm">

First add the id to your form and then create a JS script that will look like this

document.getElementById("loginForm").addEventListener("keyup", function() {
  var userInput = document.getElementById('username').value;
  var passInput = document.getElementById('password').value;
  if (userInput !== '' && passInput !== '') {
      document.getElementById('button').removeAttribute("disabled");
  } else {
      document.getElementById('button').setAttribute("disabled", null);
  }  
});

On every keystroke it will check if both inputs have value and enable/disable button accordingly

score 0 · Answer 2 · answered Jun 06 '20 at 12:38

You ask a generic question, so I can only give you a generic answer:

In theory, there might be cases where you can work with CSS only. But in practice, you will most probably need JavaScript. Using a framework that supports form input validation would be more comfortable.

If you want to have a more specific answer, you need to provide more details, e.g. what exactly you want to validate. But maybe my answer is already helpful.

Submit button clickable when form is filled in

2 Answers2