web-dev-qa-db-ja.com

jQueryは、フォームからのすべての必要な入力が空でないかどうかを確認します

メソッドPOSTと30の入力を持つ単純なフォームを想像してください。

送信ボタンから呼び出されるjQuery関数を作成したいと思います。必要なすべての入力を確認する方法を検索しましたが、役立つものは見つかりませんでした。

私はこのようなものが欲しい：

var inputs_required = all inputs from my form which have attribute required;
function check_required_inputs() {
   if(inputs_required != "") {
     //create ajax with serialize() and submit form;
   }
} else {
   //highlight inputs that are empty and show a message;
}

これはjQueryで実現できますか？

javascriptjqueryattributesrequired
7
Bogdan C

必要なすべての入力に共通のクラス（requiredなど）を指定し、each()を使用して、次のようにループすることができます。

function check_required_inputs() {
    $('.required').each(function(){
        if( $(this).val() == "" ){
          alert('Please fill all the fields');

          return false;
        }
    });
    return true;
}
10
Zakaria Acharki

Zakariaはすでに回答を投稿していますが、これはうまくいくはずです。または、カスタムクラスを使用する代わりに、input属性を持ち、textareaを使用しているselect、required、visibleのすべての要素を検索することもできます。

_var required = $('input,textarea,select').filter('[required]:visible');
_

そして、each()などを使用してそれらを反復処理します。

例：

_var allRequired = true;
required.each(function(){
    if($(this).val() == ''){
        allRequired = false;
    }
});

if(!allRequired){
    //DO SOMETHING HERE... POPUP AN ERROR MESSAGE, ALERT , ETC.
}
_
14
SuperMrBlob
_jQuery('button').on('click', function() {
  jQuery('input:invalid').css('background-color','red');
  jQuery('input:valid').css('background-color','green');
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" required="true" />
</form>
<button>click</button>_

入力に_required="true"_属性を与えるだけで、空の必須入力はすべて疑似クラス_:invalid_になります。

jQuery('input:invalid')は、すべての無効な入力のリストを提供します。 _.length_は、上記のリストの長さを提供します。長さが> 0の場合、フォームは無効です。

2
user3154108

フィールドが空であるかどうかだけでなく、ユーザーがaからbなどに文字を入れずに1つまたはスペースを挿入したかどうかをチェックするこの関数を作成しました

function checkfield (champ)
{
var off='', isit=false;
for (var j=0; j <champ.val ().trim ().split (' ').length;j++)
{
off+=champ.val ().split (' ')[j];
}
off.replace (' ', '');
if (off.length==0) isit=true;
return isit;
}

使用する：

例

if (checkfield ($('.class_of_field'))==true) return;
0
Balthazar DOSSOU

これは、フォームにIDのform-actionとID form- submitの送信ボタンがあると想定して試すことができます。

var submitButton = $('#form-submit'),
    formContainer  = $('#form-action');

    submitButton.on('click',function(e){
      e.preventDefault();
      formContainer.find('input').each(function(index,ele){
        if(ele.value === null || ele.value === ''){
            var error  = " the " + ele.name + " field  is requird ";
                ele.after(error);
           }
     });
});
0
samehanwar

また、反復可能関数 every（） を利用することもできます。これは、everyの場合にのみtrueを返します。入力検証が満たされるか、そうでなければfalse：

function check_required_inputs() {
   var valid =  Array.prototype.every.call($('.required'), function(input) {
     return input.value;
   });

   if (valid) {
     return true;
   } else {
     alert('Please fill all the fields');

     return false;
   }
}
0
Carl Edwards