css - 表单字段错误的 CSS

Question

我们的表单中有一个三个下拉的出生日期字段，如果字段留空并且用户单击提交，则现在会生成三个单独的错误消息。

我们想要么让它只是这些错误消息之一，要么在提交按钮下方显示一些其他显示。

任何指导都会很棒！

Answer 1

虽然没有提到，但我不得不想象您正在使用 JavaScript 来验证表单，如果是这样，请尝试以下操作，在您的 HTML 中，您有一个可以通过 id 标签访问的 span 标签（或 p） （比如#error 什么的）。在您的 JavaScript 中，只需将 #error 标签设置为JavaScript最后一次看到的错误。正如您将在下面注意到的，如果“出生日期”和“姓名”都缺失，则跨度标记将仅显示缺失的姓名错误文本。也就是说，如果需要，您可以轻松地连接字符串。

伪代码 (JS)

function validateForm() {
    var isValid = true,
    var myErrorText;
    if (birth date is missing) {
        isValid = false;
        errorText = "You must enter a birth date"; 
    }
    if (name is missing) {
        isValid = false;
        errorText = "You must enter a name"; 
    }

    // Display the error message if the form is invalid
    if (!validForm) {
        $('span#error').text(myErrorText);
    }

    return validForm;
}

HTML

<form method="post" action="/whatever" onSubmit="return validateForm()">
    <input type="text" id="birthDate" name="birthDate" >
    <input type="text" id="name" name="name">
    <button type="submit" id="submit" class="btn">Submit</button>
</form>
<span id="error"></p>