カスタムHTML5フォームの検証エラーは、最初の試行後にのみ発生します

Question

以下のコードでは、クライアントが異なるタイプのフィールドを持つカスタムフォームを作成し、クライアントがそのフォームに入力してどこかに送信することができます。基本的には、Wordpress用のカスタムフォームビルダです。

以下のコードを使用して、HTML5フォーム検証エラーメッセージのカスタム動作を正常に置き換えました。ただし、フォームフィールドの種類ごとに設定したカスタムメッセージは、フォーム送信が試行される2回目にのみ表示されます。最初に送信ボタンを押すと、代わりにデフォルトのメッセージが表示されます。

私が定義したカスタムメッセージを初めて使用するにはどうしたらいいですか？

申し訳ありませんが、長いコードでは、複雑なアプリケーションです。

onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')"

PHP/HTML：：

function sdForm($atts) { 
    //Check for a form id variable in the shortcode and, if it's exists, put it into the $formID variable 
    $shortcodeAtt = shortcode_atts(array(
     'id' => false, 
     ), $atts); 
    if ($shortcodeAtt != false) { 
     $formID = $shortcodeAtt['id']; 

     //Setup this form's settings and variables 
     global $post; 
     $post = get_post($formID); 
     setup_postdata($post); 

     //General Variables 
     $formTitle = get_the_title(); 
     $formSlug = $post->post_name; 

     //Form Submit Behavior 
     $onSubmit = get_field('on_form_submit'); 
     if ($onSubmit == 'default') { 
      //refresh page, display thank you 
     } elseif ($onSubmit == 'message') { 
      //refresh page, display custom message 
      $message = get_field('custom_submission_message'); 
     } elseif ($onSubmit == 'url') { 
      //send user to this page 
      $url = get_field('submission_redirect'); 
     } 

     //Form Submit To 
     $actionUrl = get_field('form_action_link'); 

     //Set value of submit button 
     if (get_field('submit_value')) { 
      $submitValue = get_field('submit_value'); 
     } else { 
      $submitValue = 'Submit'; 
     } 

     //Set ID for form 
     if (get_field('form_id')) { 
      $formHtmlId = get_field('form_id'); 
     } else { 
      $formHtmlId = $formSlug; 
     } 

     //Set Classes for form 
     if (get_field('form_classes')) { 
      $formClasses = get_field('form_classes'); 
     } else { 
      $formClasses = ''; 
     } 

     //Set any messages to display 
     $messages = ''; 
     $confirmMessage = get_field('custom_submission_message'); 
     if ($_GET['confirm-message']) { 
      $messages .= $confirmMessage.'<br />'; 
     } elseif ($_GET['confirm-submit']) { 
      $messages .= 'Thanks for your submission!'; 
     } 

     //Start the HTML output 
     $output = ''; 
     //Do some clearing, just in case 
     $output .= '<div style="clear:both;"></div>'; 
     $output .= '<div class="sdFormWrapper">'; 
     $output .= '<div class="sdFormMessages">'; 
     $output .= $messages; 
     $output .= '</div>'; 
     $output .= '<form name="'.$formSlug.'" id="'.$formHtmlId.'" class="'.$formClasses.' sd_form" method="post" '; 
     if (isset($actionUrl)) { 
      $output .= 'action="'.$actionUrl.'" '; 
     } 
     $output .= '>'; 

     //We add a hidden field to identify which form is being processed after submit 
     $output .= '<input type="hidden" name="formID" value="'.$formID.'" />'; 

     //This loops through each added field and displays each one 
     if (have_rows('input_type')) { 
      while (have_rows('input_type')) { the_row(); 

      //We're putting a uniform wrap around each input element for styling 
      if (get_sub_field('fill_row') == true) { 
       $fullWidth = 'fullWidth'; 
      } else { 
       $fullWidth = ''; 
      } 
      if (get_row_layout() == 'section_header') { 
       $output .= '<div class="sectionHeader">'; 
       $output .= get_sub_field('header_text'); 
       $output .= '</div>'; 
      } else { 



      //We turn the field label into a slug with no spaces or special characters 
      $fieldSlug = sanitize_title(get_sub_field('label')); 

      //Check if this field is required 
      if (get_sub_field('required') == true) { 
        $required = 'required'; 
      } else { 
        $required = ''; 
      } 
      //Check for custom name 
      if (get_sub_field('input_name')) { 
       $name = get_sub_field('input_name'); 
      } else { 
       $name = $fieldSlug; 
      } 
      //Check for custom html id 
      if (get_sub_field('input_id')) { 
       $htmlId = get_sub_field('input_id'); 
      } else { 
       $htmlId = $name; 
      } 
      //Check for custom html classes 
      if (get_sub_field('input_class')) { 
       $htmlClass = get_sub_field('input_class').' sdForm-input'; 
      } else { 
       $htmlClass = 'sdForm-input'; 
      } 
      //Check for icons 
      if (get_sub_field('icon')) { 
        $icon = get_sub_field('icon'); 
       } else { 
        $icon = ''; 
       } 
      //Generate Placeholder (this is the field label) 
      $placeholder = get_sub_field('label'); 

      //Start input wrap 
      $output .= '<div title="'.$placeholder.'" class="sdForm-inputWrap '.$fullWidth.'">'; 

      //Error message for field 
      //$output .= '<div class="inputError">'.$placeholder.' is required!</div>'; 
       $output .= $icon; 
       if (get_row_layout() == 'text') { 
        $output .= '<input type="text" name="'.$name.'" id="'.$htmlId.'" class="'.$htmlClass.'" placeholder="'.$placeholder.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')" />'; 
       } elseif (get_row_layout() == 'textBox') { 
        $output .= '<textarea rows="4" id="'.$htmlId.'" class="'.$htmlClass.'" placeholder="'.$placeholder.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')"></textarea>'; 
       } elseif (get_row_layout() == 'email') { 
        $output .= '<input type="email" name="'.$name.'" id="'.$htmlId.'" class="'.$htmlClass.'" placeholder="'.$placeholder.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required and must be valid.\')"/>'; 
       } elseif (get_row_layout() == 'phone') { 
        $output .= '<input type="tel" name="'.$name.'" id="'.$htmlId.'" class="'.$htmlClass.'" placeholder="'.$placeholder.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')"/>'; 
       } elseif (get_row_layout() == 'url') { 
        $output .= '<input type="url" name="'.$name.'" id="'.$htmlId.'" class="'.$htmlClass.'" placeholder="'.$placeholder.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')"/>'; 
       } elseif (get_row_layout() == 'checkboxes') { 
        if (have_rows('checkbox_selections')) { 
         if ($placeholder != '') { 
          $output .= '<label for="'.$htmlId.'">'.$placeholder.'</label><br />'; 
         } 
         while(have_rows('checkbox_selections')) { the_row(); 
          $selection = get_sub_field('checkbox_selection'); 
          $output .= '<input type="checkbox" name="'.$name.'" value="'.$selection.'" id="'.$htmlId.'" class="'.$htmlClass.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')"/>'; 
          $output .= '&nbsp;&nbsp;<label for="'.$htmlId.'">'.$selection.'</label><br />'; 
         } 
        } 
       } elseif (get_row_layout() == 'radios') { 
        if (have_rows('radio_selections')) { 
         if ($placeholder != '') { 
          $output .= '<label for="'.$htmlId.'">'.$placeholder.'</label><br />'; 
         } 
         while(have_rows('radio_selections')) { the_row(); 
          $selection = get_sub_field('radio_selection'); 
          $output .= '<input type="radio" name="'.$name.'" value="'.$selection.'" id="'.$htmlId.'" class="'.$htmlClass.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')"/>'; 
          $output .= '&nbsp;&nbsp;<label for="'.$htmlId.'">'.$selection.'</label><br />'; 
         } 
        } 
       } elseif (get_row_layout() == 'select') { 
        if (get_sub_field('show_label', true)) { 
         $output .= '<span class="dropdownLabel">'.$placeholder.': </span>'; 
         $showLabel = 'showLabel'; 
        } else { 
          $showLabel = ''; 
        } 
        $optionSlug = sanitize_title($selection); 
        if (have_rows('dropdown_selections')) { 

         $output .= '<select name="'.$name.'" id="'.$htmlId.'" class="'.$htmlClass.' '.$showLabel.'" title="'.$placeholder.'" '.$required.' onchange="setCustomValidity(\'\')" oninvalid="this.setCustomValidity(\''.$placeholder.' is required.\')">';     
         $output .= '<option selected="select" disabled>'; 
         if ($showLabel != 'showLabel') { 
          $output .= $placeholder; 
         } 
         $output .= '</option>'; 
         while(have_rows('dropdown_selections')) { the_row(); 
          $selection = get_sub_field('dropdown_selection'); 
          $optionSlug = sanitize_title($selection); 
          $output .= '<option value="'.$optionSlug.'">'.$selection.'</option>';       
         } 
         $output .= '</select>'; 
        } 
       } 
      $output .= '<div style="clear:both;"></div>'; 
      $output .= '</div>'; //.sdForm-inputWrap 
      } //end else (if not a message header) 
      }//endwhile 

     } 

     $output .= '<input type="submit" value="'.$submitValue.'" />'; 

     $output .= '</form><div style="clear: both;"></div></div>'; 

     wp_reset_postdata(); 

    } else { //There is no ID set, so we can't show any form 
     //ERROR!! No form ID specified 
    } 
    echo $output; 
} 

add_shortcode('sdForm', 'sdForm'); 

JS：

PHPセクションでは、私はそうのようなカスタムエラーメッセージを設定する場所のため Start Input Wrapセクションの下に見えます

(function($) { 
    $(document).ready(function() { 
     function sd_replaceValidationUI(form) { 
      // Suppress the default bubbles 
      form.addEventListener("invalid", function(event) { 
       event.preventDefault(); 
      }, true); 

      // Support Safari, iOS Safari, and the Android browser—each of which do not prevent 
      // form submissions by default 
      form.addEventListener("submit", function(event) { 
       if (!this.checkValidity()) { 
        event.preventDefault(); 
       } 
      }); 

      var submitButton = form.querySelector("button:not([type=button]), input[type=submit]"); 
      submitButton.addEventListener("click", function(event) { 
       var invalidFields = form.querySelectorAll(":invalid"), 
        errorMessages = form.querySelectorAll(".error-message"), 
        parent; 

       // Remove any existing messages 
       for (var i = 0; i < errorMessages.length; i++) { 
        errorMessages[i].parentNode.removeChild(errorMessages[i]); 
       } 

       for (var i = 0; i < invalidFields.length; i++) { 
        parent = invalidFields[i].parentNode; 
        parent.insertAdjacentHTML("beforeend", "<div class='error-message'>" + 
         invalidFields[i].validationMessage + 
         "</div>"); 
       } 

       // If there are errors, give focus to the first invalid field 
       if (invalidFields.length > 0) { 
        invalidFields[0].focus(); 
       } 
      }); 
     } 

     // Replace the validation UI for all forms 
     var forms = document.querySelectorAll("form"); 
     for (var i = 0; i < forms.length; i++) { 
      sd_replaceValidationUI(forms[i]); 
     } 


     //Changes the text of the dropdown to #666 when a selection is made 
     $('.sdForm-inputWrap select').change(function() { 
      $(this).css('color', '#666'); 
     }); 

    }) 
})(jQuery); 

Answer 1

あなたの問題はあなただと思いますカスタム有効期限を設定するoninvalid。これはデフォルトのUIでは動作しますが、カスタマイズしたいときは動作しません。

コードを再作成しようとしました。最初の実行時にinvalidFieldsループがデフォルトの無効なエラーメッセージを受け取ります。その後、setCustomValidityが呼び出されるため、2回目の実行時にカスタムエラーメッセージが表示されます。

これを修正するには、カスタム有効性を設定するすべてのフィールドをループし、フォーム提出の前にsetCustomValidityを呼び出す必要があります。

1つの方法は、HTMLコードでデータ属性を使用することです。

<input type="text" data-ErrorMessage="Your Custom Error Message" />

し、既存のJSにこれを追加します：フィールドごとにそのような属性を追加します

for (var i=0; i<fields.length; i++){ 
    var message = $(fields[i]).attr("data-ErrorMessage"); 
    $(fields[i]).get(0).setCustomValidity(message); 
}