0

検証を適用したいフォームがあります：

<form id="calculator">

            <div class="f-field">
                <label for="sale-price">Sale Price</label>
                <input id="sale-price" type="text" value=""/>
            </div>

            <div class="f-field">
                <label for="agent-commission">Highstreet agent commission</label>
                <input id="agent-commission" type="text" value=""/>
            </div>

            <div class="f-field">
                <label for="sale-time">Estimated sale time</label>
                <input id="sale-time" type="text" value=""/>
            </div>

            <div class="f-field">
                <input type="button" value="Calculate" id="calc-button"/>  
            </div>

        </form>

これまでの私のjQuery：

 $(document).ready(function(){

        $('#calc-button').click(function(){

            var answer = 

            parseInt($('#sale-price').val()) / 
            parseInt($('#agent-commission').val()) + 
            parseInt($('#sale-time').val());

            var validate= false;
            $("#calculator input[type='text']").each(function(){
                if($(this).val() != '' || $(this).attr('checked'))
                    validate = true;
            });
            if(!validate){
                alert('Please select at least one filter');
                return false;
            }
            else { 
                $('#calc-val').html('£' + answer);
            }

        });
    });

3 つのフィールドで検証を設定する簡単な方法はありますか?これらはすべて数値のみを持ちます。数字の存在を検証したいので、数字ではないか、まったくないものはすべてメッセージを表示します。

このような小さなフォームの方法があると確信しているので、完全なjQueryプラグインは避けたいと思いますが、これに関するアドバイスを探しています。

edit下記のコメンターとして受け入れ率に取り組もうとして、私のjQueryに追加されました。早くしてすみません。

4

2 に答える 2

1

ここに作業フィドルがあります

これにより、ユーザーが入力している間、数字ではないものはすべて削除されます...

$("#sale-price, #agent-commission, #sale-time").on("keyup keypress keydown blur input change", function() {

    // Remove All Non Numbers
    $(this).val($(this).val().replace(/[^0-9]/gi, ""));

});

次に、sumbit で値が空でないことを確認します。

$('#calculator').on('submit', function(e) {
    e.preventDefault();

    if ( ($('#sale-price').val() && $('#agent-commission').val() && $('#sale-time').val() ) != '' ) {
        $(this).submit();
    }
    else {
        alert('Please Fill In All Fields');
    }
});
于 2012-12-06T17:40:48.463 に答える
0

確かに、ハンドラーを送信イベントにバインドするだけで、値が必要なものと一致しない限り、フォームが送信されなくなります。

このようなもの：

$('#calculator').on('submit', function(e) {
    e.preventDefault();

    if ( isNumber( $('#sale-price').val() ) && isNumber( $('#agent-commission').val() ) && isNumber( $('#sale-time').val() ) ) {
        $(this).submit();
    }
    else {
        // errors in form
    }
});

// from http://stackoverflow.com/a/1830844/551093
function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
于 2012-12-06T17:36:42.383 に答える