web-dev-qa-db-ja.com

送信時に入力が空かどうかを確認します

私はこれに対する解決策を探していましたが、私のために働く例を見つけることができないようです。ここに私がこれまでに得たものがあります：

$("#register-form").submit(function(){
            if($(".required input").val() == '') {
                alert("Please fill in all the required fields (indicated by *)");
                $(".required").addClass('highlight');
                // $('input[type=submit]', this).attr('disabled', 'disabled');
                return false;
            }
        });

何らかの理由で、必須フィールドに何も入力せずにフォームを送信すると（2つあります）、動作しますが、そのうちの1つに入力しても動作しません。

なぜアイデアがありますか？

ありがとう

大須

jqueryvalidationforms
14
Osu

コードの問題は、必要に応じてフラグを立てた最初のフィールドのみをテストしていることです。 $(".required input")は、そのセレクタに一致するフォームの最初の入力のみを返します。

これにより、必要に応じてフラグが設定されたフォームのすべての入力がループされます（セレクターによる）。値が ''であるものが見つかった場合、送信関数がfalseを返すように設定し、空のフィールドを強調表示します。また、現在有効であるが、以前のフォーム送信試行で以前は無効だったフィールドからハイライトクラスを削除します。

$("#register-form").submit(function(){
    var isFormValid = true;

    $(".required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            isFormValid = false;
        }
        else{
            $(this).removeClass("highlight");
        }
    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");

    return isFormValid;
});
41
Ryan
$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($($this).val() == '') { 
      $(this).addClass('highlight');
    }
  });

  if ($('.required input').hasClass('highlight')) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}

それを試してみてください。

編集アラートを移動して、ユーザーがアラートメッセージで顔を吹き飛ばさないようにしました。

8
David Fells

簡単な解決策！：

 function checkForm(){
        $("input.required").css("border","1px solid #AFAFAF");
        $("input.required[value=]").css("border-color","red");
        if($("input.required").val().length<2)return false;
        return true;
    }
2
Andri

たぶんあなたの状態はこれになるはずです：

if($("input.required").val() == '')... //Pay attention to the selector

セレクタがすべての入力を見つけていたためchildren of .required

1
Edgar Villegas Alvarado

David Fellの答えに基づいて（私の意見ではエラーがあります）、これを行うことができます：

$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($(this).val() == '') {           
      $(this).addClass('highlight');
    }
  });

  if ($('.required input.highlight').size() > 0) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}
1
Edgar Villegas Alvarado

このコードは、選択リストとチェックボックスなどですべてのフォームフィールドを取得します.

var save_prms = $("form").serializeArray();
    $(save_prms).each(function( index, element ) {
        alert(element.name);
        alert(element.val);
    });
0
sandeep kumar

もし

$(".required input")

複数の要素に一致している場合、

$(".required input").val() == ''

おそらくあなたが期待していることをしないでしょう。

0
Mu Mind

そのようなすべてのフォーム入力の値を参照することはできません。

var valid = true;
$('.required input').each(function(){
   if( $(this).val() == '' ){
      valid = false;
      $(this).addClass('highlight');
   }
});

フォームプラグイン は、これを自動的に行います。

0
Stefan Kendall

入力の名前またはこの場合はid、入力のid

HTML：

<input type="text" id="id"... />

JQUERY：

if (!$("#id").val()) {
   do something...
}
0
obinoob