Bom, caso queira realmente fazer dessa forma, você precisa verificar se o form
está válido a cada interação do usuário. Se possui somente inputs
em seu formulário, pode utilizar o evento blur
do jQuery. Pode obter os elementos pelo que desejar, classe, tipo, etc.
Um exemplo simples seria assim:
$('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>
Exemplo no JSFiddle.
Lembrando que da forma que eu fiz está verificando somente os inputs
. Se tiver textarea
, checkbox
, selects
, dentre outros elementos, deverá tratá-los também.
E apenas reforçando, não esqueça do ModelState.isValid()
em seu controller. Validação somente no cliente é muito perigoso, pois é fácil de ser manipulado.
Edição
Para não ter mais de uma requisição e duplicar os dados salvos, você pode verificar se o modelo está válido, se tiver você bloqueia o botão.
Ficaria desta forma:
$('#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>
Fonte: Disabling a submit button after one click