Javascript 苗条应用程序错误：global.css覆盖组件级css

在一个小巧的应用程序中，我有一个带有简单验证的表单

形式 为了给无效的表单字段加上红色边框，我使用了

border:1px solid#c00！重要信息

：

.error-alert {
    border: 1px solid #c00 !important;
    color: #c00;
}

类

无效

已正确添加（和删除），但默认的

全局.css

样式会覆盖我的组件级样式，如您在本中所见

为什么会发生这种情况？什么是可靠的修复

---

---

注意：所描述的案例是一个简化的案例，实际上我可能需要其他验证，比如确保值是数字。我必须实施的解决方案不是一个非常具体的解决方案。

在REPL中，您会看到以下警告：

未使用的CSS选择器（87:1）

这是因为

无效

选择器未在标记中的任何位置使用-如果类名未使用，Svelte会告诉您并删除它。为了让Svelte能够“看到”它，它必须在标记中-您不能使用

classList

以编程方式添加它。（这是一个特性，而不是bug：以编程方式操纵DOM将不可避免地导致视图与状态不同步。）

不过在这种情况下，您不需要向输入元素添加类，也不需要在函数内部进行检查。您只需使用输入的

required

属性和

：无效的
CSS选择器：



输入：无效{
边框：1px实心#c00；
}

在用户提交任何数据之前，将应用
：invalid
状态，因此您可能希望添加一个类，指示用户是否已尝试提交：



。提交的输入：无效{
边框：1px实心#c00；
}

添加该类的最简单方法是在按钮上的
单击事件处理程序


使用HTML中免费提供的内容还有其他好处。例如，只要存在验证错误，表单就不会提交（并且验证不限于“必需”-您可以指定特定的模式，或者使用例如
type=“email”
来要求有效的电子邮件地址等），这意味着在
提交
事件处理程序中，您已经知道输入是有效的。
在REPL中，您会看到以下警告：

未使用的CSS选择器（87:1）

这是因为
无效
选择器未在标记中的任何位置使用-如果类名未使用，Svelte会告诉您并删除它。为了让Svelte能够“看到”它，它必须在标记中-您不能使用
classList
以编程方式添加它。（这是一个特性，而不是bug：以编程方式操纵DOM将不可避免地导致视图与状态不同步。）

不过在这种情况下，您不需要向输入元素添加类，也不需要在函数内部进行检查。您只需使用输入的
required
属性和
：无效的
CSS选择器：



输入：无效{
边框：1px实心#c00；
}

在用户提交任何数据之前，将应用
：invalid
状态，因此您可能希望添加一个类，指示用户是否已尝试提交：



。提交的输入：无效{
边框：1px实心#c00；
}

添加该类的最简单方法是在按钮上的
单击事件处理程序


使用HTML中免费提供的内容还有其他好处。例如，只要存在验证错误，表单就不会提交（并且验证不限于“必需”-您可以指定特定的模式，或者使用例如
type=“email”
来要求有效的电子邮件地址等），这意味着在
提交
事件处理程序中，您已经知道输入是有效的。
您可以通过使用HTML5客户端表单验证，将富描述的技术用于其他验证。有关更多信息，请访问

通过使用HTML5客户端表单验证，您可以将富描述的技术用于其他验证。有关更多信息，请访问

感谢您提醒我尽可能利用HTML，这是我经常忽略的一点。我已经冒昧地稍微修改了您的REPL，以便恢复全局错误/成功警报：不错，但是如果我需要其他验证，例如确保值是数字，那么您可以将输入类型设置为
数字
，或者将css选择器与
not（）结合使用
在这种情况下添加额外的样式。您也可以回答这个问题吗？谢谢你好请帮我一把。谢谢感谢您提醒我尽可能利用HTML，这是我经常忽略的。我已经冒昧地稍微修改了您的REPL，以便恢复全局错误/成功警报：不错，但是如果我需要其他验证，例如确保值是数字，那么您可以将输入类型设置为
数字
，或者将css选择器与
not（）结合使用
在这种情况下添加额外的样式。您也可以回答这个问题吗？谢谢你好请帮我一把。谢谢
import {fly, fade} from 'svelte/transition';
let hasError = false;
let errMessage = "";
let isSuccessVisible = false;

function validateInput() {
    var surveyForm = document.getElementById('surveyForm'),
        inputFields = surveyForm.querySelectorAll('input[type=text]');

    hasError = false;

    inputFields.forEach(function(field) {
        field.classList.remove("is-invalid");
        var inputFieldVal = field.value;
        if (inputFieldVal.length == 0) {
            field.classList.add("is-invalid");
            hasError = true;
        }
    });
    errMessage = "All the fileds are mandatory";
}


function Continue(e) {
    e.preventDefault();
    validateInput();
    if (hasError == false) {
        isSuccessVisible = true;

        setTimeout(function() {
            isSuccessVisible = false;
        }, 3000);
    }
}

.error-alert {
    border: 1px solid #c00 !important;
    color: #c00;
}

<form id="surveyForm" class="mt-4" class:submitted>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="First name" required>
  </div>
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Last name" required>
  </div>
    <div class="form-group">
    <input type="number" class="form-control" placeholder="Enter a number" required>
  </div>
    <div class="form-group">
    <input type="email" class="form-control" placeholder="Email" required>
  </div>
    <div class="form-group">
    <input type="date" class="form-control" placeholder="Date" required>
  </div>
  <button class="btn btn-full" on:click|preventDefault={Continue}>Continue</button>
</form>

<div class="form-group">
    <input bind:value={second} type="text" class="form-control" class:is-invalid="{ submitted && second.length == 0 }" placeholder="Last name">
</div>

:global(.is-invalid) {
    border: 1px solid #c00;
}