Forcer l'utilisateur à remplir tous les champs avant de soumettre le formulaire

• Apporter les modifications prennent effet après la modification des entrées de valeurs:

Sur chaque input changer, de tester les valeurs des autres inputs et vérifié l'état de radio, si tous les inputs a été saisi, il fera le soumettre button activé:

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}

inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});

Démo:

JS:

var inputs = $("form#myForm input, form#myForm textarea");

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}


inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>

Aussi il utilise la forme id="myForm", de sorte que vous pouvez l'utiliser pour valider les seules formes spécifiques dans vos pages.

Remarque: C'est testé et de travail sur Chrome, Firefox et IE.

---

EDIT:

• Faire les modifications prennent effet lorsque nous tapons dans les entrées:

Dans le code précédent, nous utilisons onchange gestionnaire d'événement pour appeler la fonction, donc il est seulement appelé lorsque l'on clique en dehors d'une donnée d'entrée (après modification).

Pour effectuer l'appel automatiquement lorsque l'utilisateur saisit un caractère dans un champ (le dernier), nous devons utiliser les onkeyup cas, donc nous n'avons pas besoin de cliquer en dehors de lui.

C'est le changement de code dont vous avez besoin :

JS:

    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>

Voici comment vous pouvez le faire:

JS:

$(document).ready(function () {
    var $inputs = $("#new_tide input:not([type=hidden]), #new_tide textarea");

    $inputs.on("input change", function () {
        valid = true;
        $inputs.each(function () {
            valid *= this.type == "radio" ? this.checked : this.value != "";
            return valid;
        });    
        $("#subnewtide").prop("disabled", !valid);
    });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
    Title: <input id="titlenewtide" type="text" name="title" required> <br>
    Description: <textarea name="description" id="description"></textarea> <br>
    Tag:  <input id="newtag" type="text" name="newtag" required> <br>
    Category: <input type="radio" name="category" value="19" required> Animation
    Hidden: <input type="hidden">
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

De loin le plus simple, serait de s'appuyer sur la validation HTML5 que vous utilisez déjà.

Vous aurais à ajouter required à tous les contrôles de formulaire si vous voulez avoir besoin de tous, et qui peut être facilement fait en utilisant jQuery entrée: sélecteur et de la définition de la propriété, comme

$(':input:not(#subnewtide)').prop('required', true)

Nous allons exclure le bouton soumettre, en tant que cela n'est pas nécessaire, de toute évidence, non pas que cela aurait de l'importance dans ce cas.

Alors nous serons à l'écoute pour la entrée événement, qui couvre toutes sortes d'entrées, comme la dactylographie, collage, etc, et la modifier événement à couvrir le bouton radio.

À l'aide de form.checkValidity() nous indique si le formulaire est valide, et renvoie un booléen, donc on peut l'utiliser directement pour définir les disabled propriété de le bouton d'envoi.

Tous ensemble, ça ressemble à ça, et c'est tout ce dont vous avez besoin, quelques lignes de code simple

$(':input:not(#subnewtide)').prop('required', true).on('input change', function() {
    $('#subnewtide').prop( 'disabled', !this.form.checkValidity() );
});

VIOLON

Pour la prise en charge des navigateurs plus anciens qui n'ont pas la validation HTML5, vous pouvez utiliser le H5F polyfill

Il y a en fait assez facile d'approche. Je suis à l'aide de JavaScript natif, mais je pense qu'il est applicable en jQuery ainsi:

var form = document.getElementById("new_tide");
form.onchange = function onChange() {
    var enable = true;
    var inputs = form.getElementsByTagName("input");
    var textareas = form.getElementsByTagName("textarea");

    for (var i in inputs) {
        enable = enable && inputs[i].value != "";
    }

    for (var i in textareas) {
        enable = enable && textareas[i].value != "";
    }

    enable = enable && textarea.value != "";
    document.getElementById("subnewtide").disabled = !enable;
}

L'événement de changement sur la forme est toujours appelé, lors de toute entrée ou textarea élément a été changé (cliquez sur l'élément, tapez, cliquez quelque part d'autre ou de perdre le focus).

Edit:

Concernant les champs cachés, vous pouvez les exclure en entourant le permettre de calcul avec un si-condition:

if (!inputs[i].hidden) {
    enable = enable && inputs[i].value != "";
}

Remarque:

Cela permettra de travailler dans n'importe quel navigateur (Internet Explorer 5.5). Vérifier sur MDN:

la Boucle for ..in

de l'élément.getElementsByTagName()

document.getElementById()

Voici un moyen rapide de le faire. Il consiste à fixer un change écouteur d'événement à :radio et :checkbox des éléments et une input écouteur d'événement à d'autres éléments. Ceux-ci peuvent à la fois utiliser un commun prédéfini handler qui va compter le nombre de unfilled élément à chaque fois que chacun de ces événements les incendies sur le bon élément.

JS:

function checkForm() {
//define and initialize variables
var unfilled = 0,
form = $(this.form);
//disable submit button if enabled
$(':submit', form).prop('disabled', true);
//count number of unfilled elements
$(':input', form).each(function() {
if( $(this).is(':radio,:checkbox') ) {
$('input[name=' + this.name + ']:checked').length || unfilled++;
} else {
$('[name=' + this.name + ']').val() || unfilled++;
}
});
//enable submit button if no unfilled element is found
unfilled || $(':submit', form).prop('disabled', false);
}
//set up event listeners to fire above handler
$(':text,textarea,select').on('input', checkForm);
$(':radio,:checkbox').on('change', checkForm);

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
Title: <input id="titlenewtide" type="text" name="title" required> <br>
Description: <textarea name="description" id="description"></textarea> <br>
Tag:  <input id="newtag" type="text" name="newtag" required> <br>
Category: <input type="radio" name="category" value="19" required> Animation
<button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

JS:

    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>