Kraft, um alle Felder auszufüllen, bevor die form submit

• Damit die änderungen wirksam werden nach ändern der Eingänge Werte:

Auf jeden input ändern, testen Sie die Werte von anderen inputs - und Aktivierungszustand der radio, wenn alle inputs eingegeben wurde, wird die submit - button aktiviert:

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");
  }
});

Demo:

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>

Außerdem verwendet er die form id="myForm", so können Sie es verwenden, um zu validieren, dass nur bestimmte Formen in Ihre Seiten.

Hinweis: Dies ist getestet und funktioniert auf Chrome, Firefox und IE.

EDIT:

• Damit die änderungen wirksam werden, wenn wir geben der Eingänge:

Im vorherigen code verwenden wir onchange Ereignisprozedur die Funktion aufrufen, so, es ist nur genannt, wenn wir Sie außerhalb einer gegebenen Eingabe (nach der änderung).

Durchführen der Anruf automatisch an, wenn der Benutzer ein Zeichen in einem Feld (die Letzte) brauchen wir das onkeyup Veranstaltung, so dass wir nicht klicken müssen, um in der Außenwelt.

Dies ist der geänderte code, den Sie benötigen :

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>

Hier ist, wie Sie es tun können:

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>

Bei weitem am einfachsten wäre es, verlassen Sie sich auf die HTML5-Validierung, die Sie bereits verwenden.

Müsste man hinzufügen required alle Formular-Steuerelemente, wenn Sie möchten, dass alle von Ihnen, und das kann leicht getan werden, indem mit Hilfe von jQuery :input Selektor und Einstellung der Eigenschaft, wie so

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

Wir werden ausschließen, dass der submit-button, als das nicht gefordert werden, dass Sie, offensichtlich, nicht, dass es egal in diesem Fall.

Dann werden wir hören, für die input Ereignis, das umfasst alle Arten von Eingängen, wie schreiben, einfügen etc, und die ändern - Veranstaltung sowie zur Abdeckung der radio-Taste.

Mit form.checkValidity() sagt uns, ob das Formular gültig ist, und gibt einen booleschen Wert zurück, so konnten wir direkt um die disabled - Eigenschaft der Schaltfläche Einreichen.

Alle zusammen, es sieht so aus, und das ist alles, was Sie brauchen, ein paar Zeilen von sehr einfachen code

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

GEIGE

Wenn Sie Unterstützung von alten Browsern, die nicht HTML5-Validierung, können Sie die H5F polyfill

Es ist eigentlich ein ziemlich einfaches Konzept. Ich bin mit nativen JavaScript, aber ich denke, es ist anwendbar in jQuery sowie:

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;
}

Das change-Ereignis auf dem Formular wird immer dann aufgerufen, wenn alle input-oder textarea-element geändert wurde (klicken Sie im element, geben Sie, klicken Sie auf einem anderen Ort ausführt oder den Fokus verlieren).

Edit:

In Bezug auf versteckte Felder können Sie ausschließen, indem Sie rund um die aktivieren Sie die Berechnung mit der wenn-Bedingung:

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

Hinweis:

Dies funktioniert in jedem browser (sogar Internet Explorer 5.5). Überprüfen Sie auf MDN:

for ..in-Schleife

element.getElementsByTagName()

Dokument.getElementById()

Hier ist ein schneller Weg, um zu erreichen, dass. Es umfasst das anfügen einer change Ereignis-listener, um :radio und :checkbox - Elemente und ein input Ereignis-listener zu anderen Elementen. Diese können beide verwenden einen gemeinsamen vordefinierten handler wird die Anzahl der unfilled element jedes mal, wenn jedes dieser Ereignisse, die das Feuer auf das entsprechende element.

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>