web-dev-qa-db-ja.com

jQueryは、すべてのフォームフィールドが入力されていることを確認します

クライアント側の検証を行うための単純なフォームがあります。検証するには、フィールドを空白のままにしないでください。これは私がそれに行く方法です：

function validateForm() {
  $('.form-field').each(function() {
    if ( $(this).val() === '' ) {
      return false
    }
    else {
      return true;
    }
  });
}

何らかの理由で、すべてのフィールドが入力されていても、関数は常にfalseを返します。

javascriptjqueryformsvalidation
13
sf89

無名関数内からfalseを返すことはできません。さらに、それが機能した場合、最初のフィールドが空の場合はfalseを返し、そうでない場合はtrueを返し、残りのフィールドを完全に無視します。よりエレガントな解決策があるかもしれませんが、次のようなことができます：

_function validateForm() {
  var isValid = true;
  $('.form-field').each(function() {
    if ( $(this).val() === '' )
        isValid = false;
  });
  return isValid;
}
_

別の推奨事項：これには、すべてのフォームフィールドをそのformfieldクラスで装飾する必要があります。別のセレクターを使用したフィルタリングに興味があるかもしれません。 $('form.validated-form input[type="text"]')

[〜＃〜] edit [〜＃〜]ああ、私はパンチに打ちのめされましたが、私の説明はまだ有効であり、うまくいけば役に立ちます。

33
Guttsy

validateメソッドからではなく、内部関数から戻っていました

試す

function validateForm() {
    var valid = true;
    $('.form-field').each(function () {
        if ($(this).val() === '') {
            valid = false;
            return false;
        }
    });
    return valid
}
4
Arun P Johny
function validateForm() {
    var invalid= 0;
    $('.form-field').each(function () {
        if ($(this).val() == '') {
            invalid++;
        }
    });

   if(invalid>0)
       return false;
   else
       return true;
}
1
Irfan TahirKheli

ここに同様のアプローチがあります：

function validateForm() {
  var valid = true;
  $('.form-field').each(function() {
    valid &= !!$(this).val();
  });
  return valid;
}

!!は入力値をブール値に変換するだけです

0
delagics