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

Question

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

Navigation

#1 by (1 votes)

4

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

Thank you 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><formid="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 html jquery

asked by anonymous 08.11.2017 / 17:52

1 answer

How to set the time for silent mode What is an RTMP server and how do I connect to it with Flash's SharedObject?

score 1 · Accepted Answer

It works here because it does not put the opening tag of the script on the run.

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

Also use $( document ).ready(function() { in the script. "His intention is to execute something as soon as possible after loading the document, without having to wait for all the 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><scripttype="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script><scriptlanguage="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><scripttype="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script><formid="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>