3

Preciso desabilitar um button até que todos os campos do formulário estiverem corretos.

Desde já agradeço.

$('#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>

3
  • Podes mostrar o HTML? Como sabes que o s campos estão corretos? estás a usar validação HTML5?
    – Sergio
    Commented 8/11/2017 às 16:55
  • Esse código funciona aqui, mas não na minha maquina Commented 8/11/2017 às 17:06
  • Que diferenças há entre este código e o teu código real?
    – Sergio
    Commented 8/11/2017 às 17:09

1 Resposta 1

1

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. "A intenção dele é executar algo o mais rápido possível depois de carregar o documento, sem precisar esperar todo o conteúdo ser carregado." by LINQ

Use assim:

<!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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .