Question

我正在使用amp-form进行后端数据输入验证，并且我想在前端显示错误。但是，当我提交表单时，即使表单包含错误（未输入名称），前端也会显示“成功！”。而不是输出错误。

PHP代码： https://gist.github.com/Stefany93/364db9e088b570fff83387494e8459a4#file-php

   action-xhr="scripts/contact_process.php" 
   verify-xhr="/scripts/contact_process.php"
   method="post" 
   target="_blank" 
   class="detailed_contact_form "
   custom-validation-reporting="as-you-go"
   >
      <fieldset class="user-valid valid">
         <legend>
            <span> Schedule an appointment</span>
         </legend>
         <div class="form-body">
            <div class="form-group">   
             <div class="form-group"> 
                  <div class="form-group"> 
               <label for="email">Email  </label> 
               <input type="text" required name="email" id="email"  value="exampleexample.com"class="form-input string-entry">
            </div>
               <label for="name">Name  </label> 
               <input type="text" required  name="name" id="name" value="Cindy"  class="form-input string-entry">
            </div>
            <div class="form-group">  
               <label for="phone">Phone </label>  
               <input type="tel" required name="phone" id="phone" value="123-345-6789" class="form-input string-entry">
            </div>
               <div class="form-group">  
               <label for="phone">Message </label>  
               <textarea name="message" required class="textarea" >I want to schedule an appointment for my dragon Skippy, for tomorrow 10AM</textarea>
            </div>
            <div class="form-group button-holder">
               <input type="submit" class="button" value="Send appointment!">
            </div>
         </div>
            <div verify-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
                <p>{{message}}</p>
            {{/verifyErrors}}
            {{^verifyErrors}}
                <p>Something went wrong. Try again later?</p>
            {{/verifyErrors}}
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
                <p>{{message}}</p>
            {{/verifyErrors}}
            {{^verifyErrors}}
                <p>Something went wrong. Try again later?</p>
            {{/verifyErrors}}
        </template>
    </div>

    <div submit-success>
    <template type="amp-mustache">
      Success! 
    </template>
  </div>

      </fieldset>

   </form> ```

Answer 1

我收到一条成功消息，因为AMP跟踪HTTP标头，并且每当我提交表单时，如果提交成功（即使由于错误我无法发送电子邮件），contact_process.php也会返回HTTP标头2xx然后AMP会认为这是成功的。

提交成功将在成功提交表单时输出，无论表单是否执行了您想要的操作。

只要后端返回HTTP标头4xxx，就会输出

submit-error。就我而言，我必须添加以下代码行：

// Add Shortcode function ima_featured_member( $atts ) { // Attributes $attributes = shortcode_atts( array( 'numb' => '1', ), $atts, 'featured' ); $dirloop = new WP_Query( array( 'post_type' => 'member', 'post_status' => 'publish', 'posts_per_page' => $attributes['numb'], 'orderby' => 'title', 'order' => 'ASC', 'meta_query' => array ( 'relation' => 'AND', array ( 'key' => 'elc_member_featured', 'value' => '1', 'compare' => '==' ) ) )); if ($dirloop->have_posts()) { $output = "\n"; while ( $dirloop->have_posts() ) : $dirloop->the_post(); $output .= ''.get_the_title().''; endwhile; $output .= "\n"; } else { $output = "nothing"; } wp_reset_postdata(); return $output; } add_shortcode( 'featured', 'ima_featured_member' );

在header("HTTP/1.1 400 Bad Request");下面，它起作用了！

每当您要输出错误时，请确保手动发送错误HTTP标头4xx。

无法在AMP中提交的表单上显示验证错误

1 个答案: