Disable button while the form is not valid

Question

Disable button while the form is not valid

Navigation

#1 by (2 votes)

0

I need to disable% save% when all fields have been validated, the following code button is always being disabled, but would you like to add a condition to change only if you have validated on the client layer?

 $('input[type=submit]').click(function (e) {

        //if ( $('#FormCadastro').valid()) {

            $(this).attr('disabled', true);
            $(this).attr('value', 'Salvando');
            $('#btnsalvar').submit();

    });

<form action="" method="post" enctype="multipart/form-data">

  div class="editor-field">
            @Html.TextAreaFor(model => model.DescricaoDaNaoConformidade, new { style = "width: 400px; height:120px;" })
            @Html.ValidationMessageFor(model => model.DescricaoDaNaoConformidade)
        </div>
  <input  type="submit" value="Salvar E Concluir" name="action:Concluir" />

</form>

jquery asp.net-mvc

asked by anonymous 04.04.2016 / 17:14

1 answer

Remove input letters using Javascript and regular expression [duplicate] Parameters in form action are not sent by GET method

score 2 · Answer 1

Well, if you really want to do it this way, you need to verify that form is valid for every user interaction. If you only have inputs on your form, you can use the blur event of jQuery. You can get the elements by whatever you want, class, type, etc.

A simple example would look like this:

$('input').blur(function () {
   verificarForm();
});
        
function verificarForm(){
  var valid = $("#MyForm").valid();
	if(valid){
        $('#btnSalvar').prop("disabled", false);
    }
}

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" disabled="disabled">Salvar</button>
    </div>
</form>

Example on JSFiddle.

Remembering the way I did it is only checking the inputs . If you have textarea , checkbox , selects , among other elements, you should treat them too. And just reinforcing, do not forget to ModelState.isValid() on your controller. Validation only on the client is very dangerous as it is easy to manipulate.

Issue

To not have more than one request and duplicate the saved data, you can check if the template is valid, if you have you lock the button. It would look like this:

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

Source: Disabling a submit button after one click