0

重い、万能のプラグインに頼ることなく、独自の基本的なフォーム検証を作成しようとしています。次のコードを記述しました。何度書き直してやり直すかは問題ではないようで、動作させることができないようです。

スクリプトはフォームをチェックして、すべてのフィールドが入力されているかどうかを確認し、入力されている場合は、送信ボタンから無効な属性を削除します。

関数：-

function checkForm(){
$('#contact :input').each(function(){
  if($(this).attr('value') == null){
     var checked = false; 
    } else {
     var checked = true;
    }
})
if (checked == true){
   alert('all filled in');
   //remove disabled attribute from button  
} else {
    alert('not completed');
    //add disabled attribute to button
}

}

そして、関数を呼び出すコード：-

$('#contact :input').blur(function(){
     if ($(this).val() <= ''){
        $(this).next('.error').show();
    } else {
        $(this).next('.error').hide();
        checkForm();
    }
})

私は一日中これをいじっていて、グーグル経由で答えを見つけるのに苦労しています。

4

4 に答える 4

1 
function checkForm(){
  var checked = true;
  $('#contact :input').each(function(){
    if(!$.trim($(this).val()).length) checked = false;
  })
  if (checked){
   alert('all filled in');
   //remove disabled attribute from button  
  } else {
    alert('not completed');
    //add disabled attribute to button
  }
}

そして関数を呼び出すには

$('#contact :input').on('blur', function(){
     if (!$.trim($(this).val()).length){
        $(this).next('.error').show();
    } else {
        $(this).next('.error').hide();
        checkForm();
    }
})
于 2012-05-11T14:07:28.233 に答える
1

.each（）の無名関数内に'checked'変数を作成しているため、if（checked == true）テストでその関数の外部でチェックされた変数を使用することはできません（'checkedisundefined'を取得しますエラー）これがアラートが発生しない理由です。

最初に無名関数の外部で「チェック済み」変数を定義してから、それに応じて更新してみてください。

function checkForm() {

    var checked = true;

    $('#contact :input').each(function () {
        if ($(this).val() == '') {
            checked = false;
        }
    })

    if (checked == true) {
        alert('all filled in');
        //remove disabled attribute from button  
    } else {
        alert('not completed');
        //add disabled attribute to button
    }

}

$('#contact :input').blur(function () {
    if ($(this).val() == '') {
        $(this).next('.error').show();
    } else {
        $(this).next('.error').hide();
        checkForm();
    }
})

これがjsFiddleの例です。http://jsfiddle.net/DMLzK/1/

于 2012-05-11T13:59:38.013 に答える
0

これにはjquery.validate（）関数を使用でき、その参照URLは次のとおりです。http：//docs.jquery.com/Plugins/Validation

于 2012-05-11T13:49:30.553 に答える
0

修正 ：

function checkForm(){
$('#contact :input').each(function(){
 if($(this).val() == ''){
    var checked = false; 
  } else {
 var checked = true;
}
})
if (checked == true){
 alert('all filled in');
 //remove disabled attribute from button  
 } else {
alert('not completed');
//add disabled attribute to button
 }

}

と

$('#contact :input').blur(function(){
 if ($(this).val() == ''){
    $(this).next('.error').show();
} else {
    $(this).next('.error').hide();
    checkForm();
}
})
于 2012-05-11T13:51:06.373 に答える