Amp html 使用放大器中的只读模式验证输入字段

Amp html 使用放大器中的只读模式验证输入字段,amp-html,Amp Html,有什么问题吗? 我的表单上有两个输入字段。我为每个输入创建不同的验证,这是我使用自定义验证报告=“提交时显示第一个”的原因。我的第一个输入是目的地,第二个输入是日历。当用户提交没有日期的表单时,我想向用户显示一条验证消息,我能够完美地显示该消息。 但我的问题是,我的第二个/日历输入上有光标指针,我实际上想避免,因为它是一个日期字段,我不想让用户在日期字段上键入,我想让它成为只读的 如果我将readonly放在那里,则第二次输入的自定义验证将无法工作 可能的解决办法是什么 我正在codepen上创

有什么问题吗?

我的表单上有两个输入字段。我为每个输入创建不同的验证,这是我使用自定义验证报告=“提交时显示第一个”的原因。我的第一个输入是目的地,第二个输入是日历。当用户提交没有日期的表单时,我想向用户显示一条验证消息,我能够完美地显示该消息。 但我的问题是,我的第二个/日历输入上有光标指针,我实际上想避免,因为它是一个日期字段,我不想让用户在日期字段上键入,我想让它成为只读的

如果我将readonly放在那里,则第二次输入的自定义验证将无法工作

可能的解决办法是什么

我正在codepen上创建这个场景

我们如何重现该问题?

如果这是一个功能请求,您可以使用本节指向一个原型/模型,这将帮助我们理解该请求

哪些浏览器受到影响?

所有浏览器

哪个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>

请输入您的目的地
输入旅行日期。不带日期搜索

这是一个bug,GitHub存在一个问题需要解决。 请参阅: