Disable button while form is not valid to have no more than one request and duplicate saved data

Asked

Viewed 95 times

3

I need to disable a button until all form fields are correct.

Thanks in advance.

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

javascript jquery html

  • Can you show HTML? How do you know the fields are correct? you are using HTML5 validation?

  • That code works here, but not on my machine

  • What a difference between this code and your actual code?

1 answer

1


It works here because it doesn’t put the opening script tag on the run.

Instead of <script type="text/jquery"> change to <script language="javascript">

Also use $( document ).ready(function() { in the script. "Its intention is to execute something as quickly as possible after loading the document, without having to wait for all content to be loaded." by LINQ

Use like this:

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

TESTING

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

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.