时间戳

首页 > 解决方案 > 在 amp 中使用只读模式验证输入字段

amp-html - 在 amp 中使用只读模式验证输入字段

问题描述

有什么问题？

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

如果我把 readonly 放在那里，我对第二个输入的自定义验证不起作用。

可能的解决方案是什么

我在 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>

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

标签： amp-html

解决方案

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

推荐阅读