0

「場所の選択」というオプションで始まる選択フィールドがあり、送信する前にユーザーに何かを選択させたいと考えています。オプションが利用可能になるまで[送信] ボタンを無効にするという記事を見ましたamp-bindが、可能であれば amp-form に組み込まれている検証を使用したいと考えています。

フィールドとフィールドでpattern属性を使用してみました。私は似たようなものや複数のバリエーションを使用しましたが、成功しませんでした。<select><option>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>

値を変更せずに [送信] をクリックすると、検証エラーが表示されるはずですが、表示されません。選択フィールドでこの検証方法を使用することは可能ですか? それとも、前述の amp-bind メソッドを使用する必要がありますか?

4

1 に答える 1

1

必要なすべてのスクリプト js ファイルをフォームから追加したと仮定しています。評価の例を示しました。

AMP は、空白値用とパターンが一致しない場合の 2 種類の検証を提供しています。空白値の検証がありません。

<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…&lt;/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
    visible-when-invalid="valueMissing"
    required
    validation-for="formLocation" 
    validation-for="show-all-on-submit-select">
    Please Choose a Location
 </span>

ありがとう

于 2020-06-06T19:54:09.883 に答える