Question

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

我们想要将其作为其中一条错误消息，或者在提交按钮下方显示其他一些显示。

任何指导都很棒！

Answer 1

虽然没有提到，但我必须想象你正在使用JavaScript来验证表单，如果是这样的话，请尝试以下内容，在HTML中你有一个可以访问的单个span标记（或p）一个id标签（比如#error或者什么）。在您的JavaScript中，只需将#error标记设置为JavaScript最后一次看到的错误。如下所示，如果缺少“出生日期”和“名称”，则span标记将仅显示缺少的名称错误文本。也就是说，如果需要，您可以轻松地连接字符串。

伪代码（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>

表单字段错误的CSS

1 个答案: