JSFiddle - React, Tailwind, and code Playground

by orlov0562

HTML

<form action="" id="forma">

  <input type="text">
  <input type="text">
  <input type="text">
  <input type="password">
  <input type="password">
  <input type="submit" value="Отправить" id="submit" disabled>
  
</form>

CSS

form{
    width: 200px;
    padding: 10px;
    margin: 50px 0 0 50px;
    background: rgb(146, 227, 252);
    text-align: center;
}
input{
    display: block;
    margin: 10px auto 0;
}
form input[type="submit"]{
    display: inline-block;
    border: 2px solid #ccc;
    background: none;
    width: 100px;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    color: #000;
}

JavaScript

var inputs = $('#forma input[type="text"], input[type="password"]');

    var inputs = $('#forma input[type="text"], input[type="password"]');

    inputs.on('keyup', function(){params();});


    function params() {      
    
        var isFilled = true;
        var inputs = $('#forma input[type="text"], input[type="password"]');
        for (let i=0; i<inputs.length; i++) {
          if (!$(inputs[i]).val().length) {
           isFilled=false;
           break;
          }
        }
    
        if(isFilled) {
            $('#submit').removeAttr('disabled');
            $('#submit').css('background-color', 'green');
        } else {
            $('#submit').attr('disabled', 'disabled');
            $('#submit').css('background-color', 'silver');
        }
    }