如何验证 amp-form 中的 Select 字段以不允许默认启动选项？

Question

我有一个 select 字段，该字段以 "Select Location" 选项开头，并希望强制用户在提交前做出选择。我看到 this article 关于使用 amp-bind 禁用提交按钮直到一个选项可用，但我想尽可能使用 amp-form 内置的验证。

我尝试在 <select> 和 <option> 字段上使用 pattern 属性。我使用了类似于 pattern="^((?!default).)*$" 的东西和多种变体，但没有任何成功。

<form
    id="contactForm"
    method="post"
    action-xhr="https://valid.json/endpoint"
    custom-validation-reporting="show-all-on-submit"
    target="_top">

    [...]

    <select
        id="formLocation"
        name="location_id"
        pattern="^((?!default).)*$"
        required>
        <option value="default" disabled selected>Select Location</option>
        <option value="newyork">New York</option>
        <option value="losangeles">Los Angeles</option>
    </select>
    <span
        visible-when-invalid="patternMismatch"
        required
        validation-for="formLocation">
        Please Choose a Location
    </span>

    [...]

    <input
        id="formSubmit"
        type="submit"
        value="Submit">
</form>

当我在不更改值的情况下单击“提交”时，我预计会出现验证错误，但实际上并没有。是否可以将此验证方法与 Select 字段一起使用？还是我必须使用前面提到的 amp-bind 方法？

Answer 1

我假设您已经从表单中添加了所有必需的脚本 js 文件。我提供了评级示例。

AMP 提供两种类型的验证，一种用于空白值，另一种用于模式不匹配。您缺少空白值验证。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>


<form action-xhr="here will be your url" custom-validation-reporting="show-all-on-submit" target="_top" method="post" class="wpcf7-form i-amphtml-form amp-form-dirty" novalidate="">

    <label for="rating">Select rating</label>
    <select name="rating" required="" class="user-invalid valueMissing" id="show-all-on-submit-select" aria-invalid="false">
        <option value="">Rate…</option>
        <option value="5">Perfect</option>
        <option value="4">Good</option>
        <option value="3">Average</option>
        <option value="2">Not that bad</option>
        <option value="1">Very poor</option>
    </select>
    // You are missing this one 
    <span visible-when-invalid="valueMissing" validation-for="show-all-on-submit-select">

         Please select rating..!!
    </span>
    // This is for the pattern validation message. If the field is having the value but not does not match with patter this span will provide the validation
    <span visible-when-invalid="patternMismatch" validation-for="show-all-on-submit-select">
            Please select rating..!!
    </span>

    <input type="submit" name="submit" value="Submit" class="wpcf7-form-control wpcf7-submit button yellow-button">

</form>

现在，如果您的代码中需要相同的解决方案，只需放在 span 下面，我认为它一定适合您：

 <span
    visible-when-invalid="valueMissing"
    required
    validation-for="formLocation" 
    validation-for="show-all-on-submit-select">
    Please Choose a Location
 </span>

谢谢

如何验证 amp-form 中的 Select 字段以不允许默认启动选项？

How to validate Select field in amp-form to not allow default start option?

forms

amp-html

amp-form