The code below allows my client to create a custom form with different types of fields, and then allows his customers to fill out this form and submit it somewhere. Basically, the creator of custom forms for Wordpress.
I have successfully replaced custom behavior for HTML5 form validation error messages using the code below. However, the custom message that I set for different types of form fields appears only the second time an attempt to submit a form is made. The first time you press the submit button, a default message appears.
How can I get special messages that I have determined to use for the first time?
Sorry for the long code, this is a complicated application. In the PHP section, find the Start Input Wrap section, where I set up custom error messages as follows:
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 exists, put it into the $formID variable $shortcodeAtt = shortcode_atts( array( 'id' => false, ), $atts ); if ($shortcodeAtt != false) { $formID = $shortcodeAtt['id']; //Setup this form 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 .= ' <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 .= ' <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