Bulma输入验证

Question

在Bulma中有没有简单的表单验证方法？我认为简单的HTML5输入验证(input step="any" type="number")可能会起作用，但是被Bulma忽略了。我看到一些用于表单验证的JS库，它们与Bulma兼容，但没有更简单的方法吗？也许可以使用oninvalid()事件添加某种is-danger样式，如果没有错误，可以改回原来的样式？

<form method="post">

    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label" for="price">
            Price
            </label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="input" id="price" min="1" name="price" placeholder="Price" step="any" type="number"/>
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label" for="quantity">
            Quantity
            </label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="input" id="quantity" name="quantity" placeholder="Quantity" type="number"/>
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label">
            <!-- Left empty for spacing -->
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input class="button is-success is-outlined" name="submitSave" type="submit" value="Save"/>
                </div>
            </div>
        </div>
    </div>

</form>

Answer 1

如果没有JavaScript，就无法更改CSS .class选择器。

在您的例子中，您可以使用伪类invalid，通过下面这段简单的代码来获得想要的结果：

.input:invalid {
    border-color: #f14668; /* -> is-danger */
}