How can I check if form is not empty and if form is empty then set disabled="disabled" into submit button?

How can I check if form is not empty and if form is empty then set disabled="disabled" into submit button?

<form action="/contact/" method="POST" id="form">
    <input type="text" id="name" name="name" class="form-control" placeholder="Name">
    <input type="email" id="email" name="email" class="form-control" placeholder="E-Mail">
    <textarea name="msg" id="msg" class="form-control" rows="4" placeholder="Message"></textarea>
    <input type="submit" value="Send" class="button-contac-send">
</form>

    

There are several libraries & native APIS to handle client side validation that are worth leveraging

HTML 5 Form Validation

You can use the required attribute in any input and the browser will block client side submits:

<!-- language: lang-html --> <pre><code>&lt;input id="name" name="name" <b><i>required</i></b> &gt;</code></pre>

For more advanced handling, you can also wire up Javascript using the Constraint Validation API

jQuery Validate

Another popular client side validation framework is the jQuery Validation Plugin

Custom JavaScript

If you want to write yourself... assuming all fields are required, you'll need to capture change events to all inputs, verify that all inputs have a value, and then conditionally toggle the disabled attribute on the submit button. In jQuery, it would look something like this:

<!-- language: lang-js -->

// get all input elements and attach listener
var $inputs = $("#myForm :input:not([type='submit'])")
$inputs.change(function() {

  // check if all elements have value
  var allInputsHaveValue = $inputs.toArray().every(function(el) {
    return !!el.value
  });

  // toggle submit disabled
  $("#submit").prop("disabled", !allInputsHaveValue);

}).change(); // run on init

Demo in jsFiddle