Use assim:
Ele funciona aqui porque não coloca a tag de abertura do script no executar.
Ao invés de <script type="text/jquery">
mude para <script language="javascript">
Use também $( document ).ready(function() {
no script.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script language="javascript">
$( document ).ready(function() {
$('#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();
}
});
});
</script>
<!-- language: lang-css -->
<style type="text/css">
<!--
button:disabled {
background: red;
}
.invalid {
background: red;
color: white;
}
.error {
color: red;
}
//-->
</style>
</head>
<body>
<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>
</body>
</html>
TESTANDO
$( document ).ready(function() {
$('#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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>