2

jqueryフォームチェックコードを書こうとしました。値が空の場合/単語の長さが何かよりも短い場合は、送信クリックのバインドを解除し、いくつかのdivにエラーヒントを表示します。次に5秒後、送信クリックをバインドします。jsfiddleでコーディングしますが、バインド/アンバインドが希望どおりに機能しません。

JS：

$('#submit').click(function(){
    if($('#title').val().length<10){
        $('#statue').append('You should type more than 10 words');
        $('#submit').unbind("click");
        setTimeout(function (){
            $("#statue").html("");
            $('#submit').bind("click");
        }, 5000);
    }
    if($('#content').val().length<20){
        $('#statue').append('You should type more than 20 words');
        $('#submit').unbind("click");
        setTimeout(function (){
            $("#statue").html("");
            $('#submit').bind("click");
        }, 5000);
    }
    if(!$('#type').val()){
        $('#statue').append('You should select one type.');
        $('#submit').unbind("click");
        setTimeout(function (){
            $("#statue").html("");
            $('#submit').bind("click");
        }, 5000);
    }
});

HTML：

<form method="post" action="porcess.php">
    <input id="title" name="title" type="text" />
    <textarea name="content" id="content" cols="40" rows="2"></textarea>
    <select name="type" id="type" size="5">
        <option value="a">Section A</option>
        <option value="b">Section B</option>
        <option value="c">Section C</option>
        <option value="d">Section D</option>
        <option value="e">Section E</option>
    </select>
    <input type="submit" name="submit" id="submit" value="submit" />
</form>
<div id="statue"></div>​
4

6 に答える 6

3

あなたのコードは悪いようです。一部のブロックを再利用する必要があります。jsFiddleを更新し、一部のコードを再利用し、関数を再配置しました：http: //jsfiddle.net/kwyun/21/

私が変更したもう1つのことは、バインド解除ではなく別の関数にバインドすることです。これは、ユーザーがその5秒間隔でクリックすると、フォームが送信されるためです。

後で編集：バインド解除のアイデアを中止できます。代わりに、無効なフィールドがある場合はfalseを返し、メッセージを非表示にするためだけにタイマーを設定できます。ここに更新されたjsFiddleがあります：http：//jsfiddle.net/kwyun/27/

于 2012-04-13T12:03:34.317 に答える
2

コードを少し変更しました。要素を何度もインスタンス化する代わりに、要素をキャッシュする傾向があります。クリックイベントのバインドを解除する代わりに、送信ボタンを無効/有効にする別の関数も作成しました。これは、クリックのバインドを解除するよりもユーザーフレンドリーだと思うからです。最後に、検証に応じて true/false を返す変数を追加しました。これにより、すべてが希望どおりになるまでフォームを送信しません。

実際の jsFiddle デモを参照してください。

キャッシュ要素

var $submit = $('#submit'),
    $statue = $('#statue'),
    $title = $('#title'),
    $content = $('#content'),
    $type = $('#type');

クリック ハンドラーの送信

$submit.click(function() {

    var continueSubmit = true;

    if ($title.val().length < 10) {
        $statue.append('<br />Title needs more than 10 letters.');
        disableEnable(true);
        continueSubmit = false;    
    }

    if ($content.val().length < 20) {
        $statue.append('<br />Content needs more than 20 letters.');
        disableEnable(true);
        continueSubmit = false;
    }

    if (!$type.val()) {
        $statue.append('<br />You must select 1 type.');
        disableEnable(true);
        continueSubmit = false;
    }

    return continueSubmit;
});

送信ボタンを無効化/有効化する機能

function disableEnable(isDisabled) {

    if (!isDisabled) { $statue.html(''); }
    $submit.prop('disabled', isDisabled);
    setTimeout(function() { disableEnable(false); }, 5000);

}
于 2012-04-13T12:11:28.947 に答える
1

Hiyaワーキングデモ： http： //jsfiddle.net/kwyun/17/

e.preventdefault送信を使用または変更しますtype = "button"

HTML

<form method="post" action="porcess.php">
    <input id="title" name="title" type="text" />
    <textarea name="content" id="content" cols="40" rows="2"></textarea>
    <select name="type" id="type" size="5">
        <option value="a">Section A</option>
        <option value="b">Section B</option>
        <option value="c">Section C</option>
        <option value="d">Section D</option>
        <option value="e">Section E</option>
    </select>
    <input type="button" name="submit" id="submit" value="submit" />
</form>
<div id="statue"></div>​

これが歓声に役立つことを願っています

于 2012-04-13T12:02:05.207 に答える
0

まず、検証が失敗したときに戻るfalse（または使用するevent.preventDefault）必要があります。そうしないと、送信は正常に続行されます。次に、必要な5秒間の待機中に送信が発生しないようにするために何かを行う必要があります。ハンドラーのバインドを解除するだけでは、デフォルトで通常の送信が再び行われるため、機能しません。これは望ましくないと思いますよね？

入札を解除する代わりに、falseを返しながらサイレントに終了する別の関数にバインドすることをお勧めします。その5秒後、元の関数に再度バインドします。

編集：bind 2番目の引数であるイベントにバインドする関数が必要であることにも注意してください。単一の引数で呼び出すだけでは機能しません。ブーレン（preventBubble）を受け入れる2番目のフォームを確認してください。おそらくそれが必要です。

$('#submit').bind("click",false);
setTimeout(function (){
    $("#statue").html("");
    $('#submit').bind("click", yourFunction); // Remember to keep a reference to your function somewhere
}, 5000);
于 2012-04-13T12:01:53.710 に答える
0

あなたは電話する必要がありますe.preventDeault()

jsfiddleを更新します

http://jsfiddle.net/kwyun/9/

于 2012-04-13T11:59:00.957 に答える
0

私もあなたのフィドルを更新しました。見てください。

jsfiddle

于 2012-04-13T12:18:19.653 に答える