如何条件渲染HTML的aria-invalid属性？PicoCSS表单错误处理

在Svelte里可以利用条件属性绑定实现需求：当属性值为true时渲染该属性，值为false、null或undefined时自动移除属性，刚好匹配你只在错误出现时添加aria-invalid的要求。

实现步骤 #

1. 给form设置初始值，避免访问未定义属性时报错
2. 通过可选链和布尔转换，为aria-invalid绑定条件值

完整代码示例 #

<script>
   export let form: ActionData = { errors: {} };
   // 表单提交出错时，form.errors.firstName会被赋值错误信息
</script>

<form>
    <input 
        name="first-name" 
        aria-invalid={!!form.errors?.firstName} 
    />
    <!-- 可选：显示错误提示文本 -->
    {#if form.errors?.firstName}
        <p style="color: var(--pico-color-danger);">{form.errors.firstName}</p>
    {/if}
</form>

关键说明 #

• form.errors?.firstName使用可选链操作符，避免form.errors不存在时抛出错误
• !!双重否定将错误信息（字符串类型）转为布尔值true，确保aria-invalid仅在有错误时渲染为aria-invalid="true"
• 无错误时，aria-invalid属性不会出现在DOM中，PicoCSS不会触发错误/成功样式，完全符合你的需求

内容的提问来源于stack exchange，提问作者fricardi