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

Question

我有一个选择域，它以一个选项"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>

谢谢