4

こんにちは、いくつかのフィールドを持つフォームがあります。それらの中で：

<div>
    <label for="phoneNumber" class="label">Phone Number</label>
    <input name="phoneNumber" type="text" id="phoneNumber" size="13"  style="float:left;margin-right:10px;">
</div>
<div>
    <input type="checkbox" name="activePN" id="activePN" checked >
    <label for="activePN">Active</label>
</div>

フォームが送信されると、入力を検証し、検証されなかったフィールドの各フィールドの横に書き込みます。このような：

$('#submit').click(function () {
    var proceed = true;
    var strippedPN = $('#phoneNumber').val().replace(/[^\d\.]/g, '').toString(); //strips non-digits from the string
    if (strippedPN.length !== 10) {
        $('#phoneNumber').text('<p>Phone number has to be 10 digits long.</p>')
        proceed = false;
    }
...
...
...
});

<p> </p>これらのタグを追加することでそれができると思っていました。html()しかし、そうではありません... 注：代わりにtext()とのactivePN代わりに も試しましたphoneNumber。

4

3 に答える 3

13

を使用し.after()ます。

$('#phoneNumber').after('<p>Phone number has to be 10 digits long.</p>')

タグにもクラスを追加するのが賢明かもしれませんp。そうすれば、番号が正しく編集されたときにクラスを削除できます。

于 2013-08-15T23:13:12.913 に答える
2

試す：

$('#submit').click(function(){
  var proceed = true;
  var strippedPN = $('#phoneNumber').val().replace(/[^\d\.]/g, ''); //strips non-digits from the string - already a String
  if(strippedPN.length !== 10){
    $('#phoneNumber').after('<p>Phone number has to be 10 digits long.</p>')
     proceed = false;
  }
}
于 2013-08-15T23:23:56.450 に答える
0

jqueryvalidationプラグインを使用するのが最善です。

ただし、一部のシナリオでは、カスタム コードを使用して検証メッセージを表示する必要がある場合があり、以下が役立つ場合があります。

コード

var errorSeen = false;

$('#txtname').keyup(function (e) {

var validInput = false; // TODO set your validation here

if (!validInput) {

  var errorMessageVisible = $(".validationMessage").is(":visible");

  if (errorSeen === false && errorMessageVisible === false) {

      $('#txtname').style.borderColor = "red";

        $('#txtname').after("<span class='validationMessage' style='color:red;'>
                            Name is required.</span>");

        errorSeen = true;
    }


  }
   else {

   $('#txtname').style.borderColor = "";

     var errorMessageVisible = $(".validationMessage").is(":visible");

     if (errorMessageVisible)
        $(".validationMessage").remove();

        errorSeen = false;
  }

});
于 2019-05-30T14:21:04.110 に答える