Skip to main content
1 de 3
user avatar
user avatar

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>

user60252