4

フォームのいくつかのフィールドを検証しました..しかし、いくつかの問題があります..フィールドに入力しないとエラーメッセージが表示されます..フィールドに入力してもエラーメッセージが表示されます..

それを置く方法は？

私のコード

 $("#Name").focus();
$("#Name").blur(function(){
    var name=$('#Name').val();
    if(name.length == 0){
        $('#Name').after('<div class="red">Name is Required</div>');
    }
    else {
    return true;
    }
});

   $("#Address").blur(function(){
    var address=$('#Address').val();
    if(address.length == 0){
        $('#Address').after('<div class="red">Address is Required</div>');
        return false;
    }
    else {
    return true;
    }
});

誰か助けてください?????

4

4 に答える 4

3

このコードを試してください（構造を変更して return false を追加しただけです）：

$("#Name").focus()

$("#Name, #Address").blur(function(){
    if($(this).val().length == 0){
        $(this).after('<div class="red">This field is required</div>');
    } else {
        $(this).next('.red').remove()
    }
});

しかし、最善の方法は、次のように必要な属性をフィールドに追加することだと思います:

<input type="text" name="name" required />
<input type="text" name="address" required />
于 2013-07-20T06:24:06.553 に答える
3

ユーザーがデータを入力した後、このラベルを削除する必要があります 

$("#Name").focus();
$("#Name").blur(function(){
    var name=$('#Name').val();
    if(name.length == 0){
        $('#Name').after('<div class="red">Name is Required</div>');
    }
    else {
        $('#Name').next(".red").remove(); // *** this line have been added ***
        return true;
    }
});

   $("#Address").blur(function(){
    var address=$('#Address').val();
    if(address.length == 0){
        $('#Address').after('<div class="red">Address is Required</div>');
        return false;
    }
    else {
        $('#Address').next(".red").remove(); // *** this line have been added ***
        return true;
    }
});

jsfiddle:デモ

于 2013-07-20T06:25:16.523 に答える
3

あなたのコードには、空のテキストボックスにぼかした回数だけ div を配置するというバグがあります。このバグも私のコードで削除されています

ワーキングデモhttp://jsfiddle.net/XqXNT/

$(document).ready(function () {
    $("#Name").focus();
    $("#Name").blur(function () {
        var name = $('#Name').val();
        if (name.length == 0) {
            $('#Name').next('div.red').remove();
            $('#Name').after('<div class="red">Name is Required</div>');
        } else {
            $(this).next('div.red').remove();
            return true;
        }
    });

    $("#Address").blur(function () {
        var address = $('#Address').val();
        if (address.length == 0) {
            $('#Address').next('div.red').remove();
            $('#Address').after('<div class="red">Address is Required</div>');
            return false;
        } else {
            $('#Address').next('div.red').remove();
            return true;
        }
    });

});

より少ないコードでより良い方法で同じ作業を行う必須属性を使用する方が良いでしょう。

HTML5

<input type="text" name="name" required />
<input type="text" name="address" required />
于 2013-07-20T06:30:19.880 に答える
0

状態で追加された html を削除してみてくださいelse。

 if(name.length == 0){
        $('#Name').after('<div class="red">Name is Required</div>');
    }
    else {
    $('.red').empty(); //here
    return true;
    }

そして同じ $("#Address")

于 2013-07-20T06:18:34.947 に答える