javascript - ASP.NET MVC、テキスト ボックスのすぐ横にテキストを表示

Question

名前がフォームに入力されていない場合のように、jQueryを使用してテキストボックスのすぐ隣にテキストを表示するにはどうすればよいですか?送信ボタンをクリックすると、名前テキストボックスのすぐ隣にテキストが表示されます。これには検証を使用します。単純なjQueryコーディングを使用してテキストボックスの値をチェックしています..? これが私のコードです..

$('#btnAddContact').click(function () {
        if ($("#name").val().length <= 0) {
             $("#name").val("");
             $("#name").focus();
});

Answer 1

検証メッセージ表示に使おうとしていると思います

1. 次に、テキストボックスをdivに入れます
2. float:leftCSSでテキストボックスに追加
3. 次に、コンテンツを div に書き込むか、その div にラベルまたはスパンを作成して、float:rightそのスパンまたはラベルに css を適用できます

Answer 2

名前の横に非表示の div を配置して、関数に表示するだけです。

<div id="errorName" style="display:none">Name can't be empty</div>

そして、関数：

$('#btnAddContact').click(function () {
    if ($("#name").val().length <= 0) {
         $("#errorName").fadeIn();
         $("#name").val("");
         $("#name").focus();
    }
    else
       $("errorName").fadeOut();
});

Answer 3

name存在しない場合は、後に新しい div を追加します。

$('#btnAddContact').click(function () {
  var msg = $('#name-message');
  if (msg.length == 0) {
      msg = $('<div id="name-message"></div>')
      $('#name').after(msg);
  }

  msg.html('Opps. Error!');   
});

Answer 4

このように簡単にできます

$('#btnAddContact').click(function () {
        if ($("#name").val().length <= 0) {
             $("#name").val("");
             $("#name").after('<span>Please enter name</span>');
             $("#name").focus();
        }
});