Validierung aller Eingabefelder durch eine einzige/Minimalzeile im Code mit jQuery

Question

Ich habe ein Formular, in dem ich 30 Eingabefelder, 10 Textbereiche und 3 Auswahlfelder habe ( aktualisiert ) und alle sind Pflichtfelder.

Wie wende ich Validierung durch jQuery / javascript zusammen für alle Eingabefelder, die es can't be blank/empty/NULL.

Ich möchte nicht jedes Mal die ID jedes Eingabefeldes verwenden und eine separate Validierung für jedes Eingabefeld und jeden Textbereich erstellen.

Wenn ein Eingabefeld leer ist, dann wird sein Rand rot und wenn ein Benutzer etwas schreibt, dann wird es normal (kein Rand, d.h. diese Klasse wird entfernt)

アップデイト :

Es gibt auch Auswahlfelder. Wie kann ich sie zusammen validieren?

Answer 1

Etwa so:

$("#myForm").submit(function() {

    // if there are some empty inputs
    if($(":input[value]").length != $(":input").length)) {

        // filter out the empty ones, apply some CSS
        $(":input").filter(function() {
            return this.value.length == 0;
        }).addClass("blank");

        // do not submit
        return false;
    }
});

$(":input").blur(function() {
    if(this.value.length > 0) {
        $(this).removeClass("blank");
    }
});

Answer 2

1. Entfernen Sie den roten Rahmen von jedem Text, Textfeld und Listenfeld.
2. Herausfiltern Elemente, die mindestens 1 Nicht-Leerzeichen-Zeichen enthalten - \S +
3. Rot hinzufügen Rahmen um die übrigen Elemente

javascript

function validate() {
  return $("input:text,textarea,select").removeClass('blank').filter(function() {
    return !/\S+/.test($(this).val());
  }).addClass('blank').size() == 0;
}

$('#form').submit(validate);

css

.blank {
    border: 1px red solid;
}