0

のクラス名を持ついくつかの入力フィールドがありrequiredます。

すべての<input>フィールドに値があるかどうかを確認する以下のコードがあります。空またはnullでない場合は、特定のdiv.

しかし、それは私にはうまくいかないようです。

また、デフォルトで#printは、CSS を介して none として表示されます。

<!-- index.php -->

<input type="text" id="getID" class="required form-control" placeholder="id">
<input type="text" id="getName" class="required form-control" placeholder="name">

<!-- script.js -->

$(document).ready(function() { 
  $('input.required').each(function() { 
    if($(this).val() != "") {
        $("#print").show();
    }
    else {
        $("#print").hide();
    }
  });
});
4

3 に答える 3

2

私はお勧めします：

$('#print').toggle(!($('input.required').length == $('input.required').filter(function () {
        return this.value;
    }).length));

単純化された JS Fiddle デモ。

送信前に要素を検証としてsubmitのみ表示したい場合は、明らかにこれを実行する必要があります。#print

参考文献:

于 2013-09-30T15:51:52.273 に答える
1

上記のコメントで述べたように、ユーザーが何かを入力する前に、ページが読み込まれるときに値をチェックしています。ページにボタンがある場合は、適切なタイミングで関数を起動するイベントにバインドします。

このjFiddleのようなもの

index.php

<input type="text" id="getID" class="required form-control" placeholder="id">
<input type="text" id="getName" class="required form-control" placeholder="name">
<div id="button">Submit</div>
<div id="print">You're missing something D:!</div>

script.js

$('#button').on('click', function() { 
    $('#print').hide();
    var error=false;
    $('input.required').each(function() { 
        if($(this).val() == "") {
            error=true;
        }
    });
    if(error) {
        $('#print').show();   
    }
});
于 2013-09-30T15:53:13.403 に答える
0

試す

$(document).ready(function () {
    //the default state
    var valid = true;
    $('input.required').each(function () {
        //if the value of the current input is blank then the set is invalid and we can stop the iteration now
        if ($.trim(this.value) == '') {
            valid = false;
            return false;
        }
    });
    //set the visibility of the element based on the value of valid state
    $("#print").toggle(!valid);
});
于 2013-09-30T15:48:26.350 に答える