1

各必須フィールドのボックスの後にアスタリスクがある入力フォームを作成したいと思います。ユーザーが文字列を入力すると、アスタリスクが感嘆符に変わります。現在、JavaScript コードは、ユーザーが文字を入力するたびに感嘆符を追加するだけです。

HTML:

<form name="form1">
<ul>
<li><input type='text' name ='text1' required placeholder="required"/></li>
<li><input type='text' name ='text1' required placeholder="required"/></li>
<li><input type='text' name ='text1' placeholder="not required"/></li>
</ul>
</form>

Java/JQUERY:

 $(function() {
        $('input:required').after( "<span>*</span>" );  

    });

 $('input:required').keyup(function(){
    var dInput = this.value;
    if(dInput.length > 0)
    //if($('input:required').is(':valid'))
    {
        $(this).after("<span>!</span>")
    }
 });

助けてくれてありがとう！

4

2 に答える 2

1

あなたの主な問題は、呼び出すたびに要素.afterを追加するspanことです。以前に作成したスパン要素を使用して取得し、.parent().children("span")その内容を変更できます。

 $(this).parent().children("span").text("!")

それ以外の ：

$(this).after("<span>!</span>")

これはコードを修正する最も簡単な方法ですが、目的を達成するための最善の方法ではない可能性があります。

これ$('input').keyup()は、フル コントロールのリアルタイム検証に適したアプローチですが、validationjQuery のプラグインを調べることもできます。

編集

spanDOM ツリーをナビゲートする代わりに IDを使用する例。これによりspan、JavaScript コードを壊すことなく、HTML ツリー内の任意の場所にタグを移動できます。

$(function() {
    $('input:required').each(function(index) {
        var id = this.form.name+this.name+"mark";
        $(this).after( "<span id='"+id+"'>*</span>" ); 
    });
});

$('input:required').keyup(function(){
    if(this.value.length > 0) {
        var id = this.form.name+this.name+"mark";
        $("#"+id).text("!");
    }
});

これが機能するためには、フォーム内で入力に一意の名前が必要であることに注意してください。

また、spanタグとそれに対応するタグidは、JavaScript でクライアントによって生成される代わりに、HTML で静的に記述されるか、サーバーによって生成される可能性があることに注意してください。

于 2013-04-26T07:42:30.897 に答える
0

.foucsout()を使用する必要があります。たとえば、Tab キーを押して次のフィールドまたはボタンにジャンプすることにより、テキスト フィールドからフォーカスが失われるとすぐに。コールバックで長さをテストし、.focusout()'!' を追加します。

また、@zakinster ソリューションも参照してください。彼の解決策は、'*' を '!' に置き換えるのに役立ちます。これを理解したので、ユーザーが入力を完了したときにアスタリスクを感嘆符に置き換え、入力を判断できるように、.focusout() を提案しました。

于 2013-04-26T07:42:56.797 に答える