JSFiddle - React, Tailwind, and code Playground

by stic_k

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"]');

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


    function params() {      
        if(inputs.val() != '') {
            $('#submit').removeAttr('disabled');
            $('#submit').css('border', '2px solid red');
        } else {
            $('#submit').attr('disabled', 'disabled');
            $('#submit').css('border', '2px solid grey');
        }
    }