0

キーアップのフォームフィールドの横にある視覚的なチェックマークまたはXを使用して、独自のフォーム検証をロールしようとしています。私が抱えていた問題の1つは、エラーが発生したかどうかにかかわらず、キーアップが実行された後に新しいスパンが生成されることでした。そこで、各キーを押し上げた後にすべての要素を削除して、成功またはエラーメッセージが表示された1つのスパンを取得しようとしました。これは現在機能していますが、これを行うためのより良い方法があるかどうか疑問に思っていました。

jQuery('input#firstname').keyup(function () {

    var text = jQuery(this).val();

    if (check_text(text) === false || text === '') {
        $(this).nextAll().remove();
        jQuery(this).after('<span class="form-error">Error</span>');
    } else {
        $(this).nextAll().remove();
        jQuery(this).after('<span class="form-success">Success</span>');
    }
});

/* Functions */

function check_text(text) {
    var regex = /^[a-zA-Z0-9- ]*$/;
    return regex.test(text);
}

実例： http： //jsfiddle.net/XBaKQ/1/

4

1 に答える 1

0

それぞれの横にスパンを追加することをお勧めしますinput

<input id="firstname" /><span class='msg'></span> <br>
<input id="lastname" /><span class='msg'></span>

スクリプトでは、次のようなメッセージを設定します。

      if (check_text(text) === false || text === '') {
        jQuery(this).next(".msg").html('<span class="form-error">Error</span>');
       } else {      
         jQuery(this).next(".msg").html('<span class="form-success">Success</span>');
      }

jsFiddle

于 2013-03-26T21:27:05.983 に答える