自定义 HTML5 表单验证错误仅在第一次尝试后发生

下面的代码允许我的客户创建具有不同类型字段的自定义表单，然后允许他们的客户填写该表单并将其提交到某处。基本上，Wordpress 的自定义表单生成器。

我已成功替换了自定义行为HTML5使用以下代码形成验证错误消息。但是，我为不同类型的表单字段设置的自定义消息仅在第二次尝试提交表单时出现。第一次按下提交按钮时，会显示默认消息。

如何才能让我定义的自定义消息也能在第一次使用？

抱歉代码很长，这是一个复杂的应用程序。在里面PHP部分，查看下面的Start Input Wrap我设置自定义错误消息的部分，如下所示：

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:

 (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);

我认为你的问题是你正在设置自定义有效性oninvalid。这适用于默认 UI，但不适用于您想要自定义它的情况。

我尝试重新创建你的代码。第一次运行时invalidFields循环正在获取默认的无效错误消息。在此之后setCustomValidity然后调用，因此您在第二次运行时会收到自定义错误消息。

要解决此问题，您必须循环遍历要设置自定义有效性的所有字段并调用setCustomValidity在提交表格之前。

一种方法是利用数据属性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);
}