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

Question

您好，有一个包含几个字段的表单。其中:

<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 .

Answer 1

使用.after()。

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

将一个类添加到您的 p 标签可能是明智的，这样当数字被编辑为正确时您可以删除它们。