Question

出了什么问题？

我在表单上有两个输入字段。我为每个输入创建不同的验证，这是我使用custom-validation-reporting =“ show-first-on-submit”的原因。我的第一个输入是目的地，第二个输入是日历。当用户提交没有日期的表单时，我想向用户显示一条能够完美显示的验证消息。但是我的问题是我在我的第二个/日历输入上获得了光标指针，但实际上我想避免，因为它是一个日期字段，并且我不想用户在日期字段上键入，我想使其变为只读。

如果我将其放在只读位置，则我对第二个输入的自定义验证无效。

有什么可能的解决方案

我正在Codepen上创建场景 https://codepen.io/sayalok/pen/yqXoab

我们如何重现该问题？

如果这是一项功能请求，则可以使用本节指向可以帮助我们理解该请求的原型/模型。

哪些浏览器受到影响？

所有浏览器

哪个AMP版本受到影响？

1531800879103

<div class="home-alert-msg" visible-when-invalid="valueMissing" validation-for="search">
    <span>Please enter your destination</span>
</div>
<div class="start_date_err_msg home-alert-msg" visible-when-invalid="valueMissing" validation-for="startDate">
    <span>Enter your trip dates.Search Without Date</span>
</div>
<form method="get" action="https://google.com/" target="_top" class="p2 form" id="form" custom-validation-reporting="show-first-on-submit"> 
    <div class="wrapper">
        <div class="form-grid">
            <div class="form-item city-state">
                <input placeholder="Where do you want to stay?" name="search" type="text" id="search" required autocomplete="off"/>
            </div>
        </div>
    </div>
    <div>
        <input type="text" name="date_start" placeholder="Check In" id="startDate" required on="tap:lb.open">
    </div>
    <input type="text" name="date_end" placeholder="Check Out" id="endDate" required on="tap:lb.open" readonly>
    <amp-lightbox id="lb" layout="nodisplay">
        <div class="align-content-center">
            <amp-date-picker type="range"
                id="drp" on="activate: lb.open;deactivate: lb.close;"
                locale="en" format="YYYY-MM-DD"
                first-day-of-week="<?= $this->start_day ?>"
                mode="static" layout="fixed-height"
                height="430" start-input-selector="#startDate"
                end-input-selector="#endDate" open-after-clear>
            </amp-date-picker>
        </div>
    </amp-lightbox>
    <div>
        <input type="submit" class="subscribe-button" id="subscribe-button-id" value="Submit">
    </div>
</form>

codepen网址：https://codepen.io/sayalok/pen/yqXoab

Answer 1

这是一个错误，并且存在一个GitHub问题可以解决。请参阅：https://github.com/ampproject/amphtml/issues/17687

在放大器

1 个答案: