Javascript 如何使用jQuery在字段旁边添加验证错误消息

我有一个带有几个字段的表单。其中:

<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;
    }
...
...
...
});

$（'#提交'）。单击（函数（）{
var=true；
var strippedPN=$（'#phoneNumber'）.val（）.replace（//[^\d\.]/g'，）.toString（）；//从字符串中去除非数字
如果（条带长度！==10）{
$（“#电话号码”）。文本（“电话号码必须是10位数字长。
”）
继续=错误；
}
...
...
...
});

我想添加那些

标签就可以了。但是他们不。。。 注意：我还尝试了用

html（）

代替

text（）

，用

activePN

代替

phoneNumber
使用
.after（）

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

$（“#电话号码”）。之后（“电话号码必须是10位数字长。
”）

将类添加到您的
p
标记中可能也是明智的做法，这样您可以在将编号编辑为正确后删除它们。
尝试：

$('#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;
  }
}

$（“#提交”）。单击（函数（）{
var=true；
var strippedPN=$（'#phoneNumber'）.val（）.replace（//[^\d\.]/g'，）；//从字符串中去除非数字-已经是字符串
如果（条带长度！==10）{
$（“#phoneNumber”）。之后（“电话号码必须是10位数字长。
”）
继续=错误；
}
}
最好使用插件

但在某些情况下，您可能需要使用自定义代码显示验证消息，下面可能会有所帮助

代码

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;
  }

});

var errorSeen=false；
$（'#txtname'）.keyup（函数（e）{
var validInput=false；//在此处设置验证
如果（！validInput）{
var errorMessageVisible=$（“.validationMessage”）.is（“：visible”）；
如果（errorSeen==false&&errorMessageVisible==false）{
$（'#txtname'）.style.borderColor=“红色”；
$（'#txtname'）。在（“
名称是必需的。”）；
errorSeen=true；
}
}
否则{
$（“#txtname”）.style.borderColor=“”；
var errorMessageVisible=$（“.validationMessage”）.is（“：visible”）；
如果（errorMessageVisible）
$（“.validationMessage”）.remove（）；
errorSeen=false；
}
});
它起作用了，但只有在更改了
span
而不是
p
之后才起作用。使用
p
也会生成回车。我现在对颜色有问题。我将为此再问一个问题。