Disable button while form is not valid

Question

I need to disable one button to be saved when all fields are validated, the following code: button is always being disabled, but would add a condition to change only if it has been valid in the client layer?

 $('input[type=submit]').click(function (e) {

        //if ( $('#FormCadastro').valid()) {

            $(this).attr('disabled', true);
            $(this).attr('value', 'Salvando');
            $('#btnsalvar').submit();

    });

<form action="" method="post" enctype="multipart/form-data">

  div class="editor-field">
            @Html.TextAreaFor(model => model.DescricaoDaNaoConformidade, new { style = "width: 400px; height:120px;" })
            @Html.ValidationMessageFor(model => model.DescricaoDaNaoConformidade)
        </div>
  <input  type="submit" value="Salvar E Concluir" name="action:Concluir" />

</form>

Answer 1

Well, if you really want to do it that way, you need to check if the form is valid for each user interaction. If only inputs in your form, you can use the event blur jQuery. You can get the elements by anything, class, type, etc.

A simple example would be like this:

$('input').blur(function () {
   verificarForm();
});
        
function verificarForm(){
  var valid = $("#MyForm").valid();
	if(valid){
        $('#btnSalvar').prop("disabled", false);
    }
}

button:disabled {
    background: red;
}
.invalid {
    background: red;
    color: white;
}
.error {
    color: red;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
 

  
<form id="MyForm" novalidate="novalidate">
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required="" data-required-message="Name is required." class="valid">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required="" data-required-message="Email is required." data-type-message="You must provide a valid email address." class="valid"><label for="email" generated="true" class="error" style="display: none;">Please enter a valid email address.</label>
    </div>
    <div>
       <button id="btnSalvar" disabled="disabled">Salvar</button>
    </div>
</form>

Example in Jsfiddle.

Remembering that the way I did is checking only the inputs. If you have textarea, checkbox, selects, among other elements, should also treat them.
And just to reinforce, don’t forget the ModelState.isValid() in your controller. Client-only validation is very dangerous as it is easy to manipulate.

Editing

To not have more than one request and duplicate the data saved, you can check if the model is valid, if you have you lock the button.
Would look this way:

    $('#btnSalvar').on('click', function (e) {
            var button = $('#btnSalvar');

            button.prop('disabled', true);

            var valid = $("#MyForm").valid();
            console.log(valid);
            if (!valid) {

                e.preventDefault();
                button.prop('disabled', false);
            } else {
                $('#MyForm').submit();
            }
        });

button:disabled {
    background: red;
}
.invalid {
    background: red;
    color: white;
}
.error {
    color: red;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
 

  
<form id="MyForm" novalidate="novalidate">
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required="" data-required-message="Name is required." class="valid">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required="" data-required-message="Email is required." data-type-message="You must provide a valid email address." class="valid"><label for="email" generated="true" class="error" style="display: none;">Please enter a valid email address.</label>
    </div>
    <div>
       <button id="btnSalvar">Salvar</button>
    </div>
</form>

Source: Disabling the Submit button after one click