Required fields not working

  • I have a simple contact form set up to use required fields, the markup is:

    
<div class="form-inputs">

<label>Your Title</label>
[select title "Mr" "Mrs" "Miss" "Other"]

<label>Your name</label>
[text* fullname placeholder "Full Name"]

<label>Your Telephone</label>
[tel* telephone_number placeholder "Your Telephone"]

</div>

[submit "Request Call Back"]

    But the required fields aren’t being validated, so it’s possible to submit an empty form, which I want to avoid. I noticed in the markup on the front-end the form tag contains novalidate="novalidate" but I’m not sure where that’s coming from. Any ideas how we can get the validation/required fields working?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter rokkashthomas

    (@rokkashthomas)

    The site is at https://accident-helpline-uk-com.rokkhost.co.uk/

    If you click the ‘request call back’ button it will open a popup with the contact form.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    What other plugins and theme do you use on the site?

    Thread Starter rokkashthomas

    (@rokkashthomas)

    The theme used is Hello Elementor. The active plugins are:

    – Autoptimize
    – Code Snippets
    – Contact Form 7
    – Elementor
    – Elementor Pro
    – Enable jQuery Migrate Helper
    – Favicon by RealFaviconGenerator
    – Flamingo
    – WebP Express

    We also have some custom code which connects CF7 forms to a CRM, which is as follows:

    
add_action( 'wpcf7_init', 'wpcf7_add_form_tag_current_url' );
function wpcf7_add_form_tag_current_url() {
    // Add shortcode for the form [current_url]
    wpcf7_add_form_tag( 'current_url',
        'wpcf7_current_url_form_tag_handler',
        array(
            'name-attr' => true
        )
    );
}

// Parse the shortcode in the frontend
function wpcf7_current_url_form_tag_handler( $tag ) {
    global $wp;
    $url = home_url( $wp->request );
    return '<input type="hidden" name="'.$tag['name'].'" value="'.$url.'" />';
}

add_action( 'wpcf7_init', 'wpcf7_add_form_tag_show_body_parts' );
function wpcf7_add_form_tag_show_body_parts() {
    // Add shortcode for the form [show_body_parts]
    wpcf7_add_form_tag( ['show_body_parts', 'show_mobile_body_parts'], [
        'name-attr'=> false
    ] );
}

// Change CF7 form actions to process.pl (for CRM integration)
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
function wpcf7_custom_form_action_url() {
    return 'https://www.accident-helpline.uk.com/cgi-bin/process.pl';
}

add_filter( 'wpcf7_load_js', '__return_false' );

// Shortcodes

function show_body_parts($atts){
	extract( shortcode_atts( array(
		'deathness' => false,
		'multiselect' => false,
		'bootstrap' => false,
		'bootstrapclass' => ''
	), $atts ) );

	$html = '';

	$xml_string = file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml'));

	if ($deathness){
		error_reporting(E_ALL);
		ini_set('display_errors','on');
		//most Nasty Way to do this, DOM XML doesn't appear to be avaible
		preg_match('/<body_part id="ear">.*?<\/body_part>/s',$xml_string,$matches);
		$ear = $matches[0];
		$xml_string = preg_replace('/<body_part id="ear">.*?<\/body_part>/s','',$xml_string);
		$xml_string = preg_replace('/<\/button_details>.*?<full_list>/s','</button_details><full_list>'.$ear,$xml_string);
	}

	$parts = new SimpleXMLElement($xml_string);

	$isFirst = true;
	$html .= (!$bootstrap ? '<ul>' : '');
	foreach ($parts->full_list->body_part as $parts){
		$attrs = $parts->attributes();

		if ($multiselect) {
			$html 	.= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>' : '<li>')
					.'<label for="body_part_'.$attrs['id'].'">'
						.'<input type="checkbox" name="body_part" id="body_part_'.$attrs['id'].'" value="'.$attrs['id'].'" />'
						.'<span>'
						.ucwords(preg_replace('/\s?injur(ies|y)/i','',$parts->name))
						.'</span>'
					.'</label>'
					.($bootstrap ? '</div>' : '</li>')."\n";
		} else {
			$html 	.= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>': '<li>')
					. '<label for="body_part_'.$attrs['id'].'" class="radio-inline">'
					. '<input type="radio" name="body_part" id="body_part_'.$attrs['id'].'" value="'.$attrs['id'].'" />'
						.'<span>'
							.ucwords(preg_replace('/\s?injur(ies|y)/i','',$parts->name))
						.'</span>'
					.'</label>'
					.($bootstrap ? '</div>' : '</li>')."\n";
		}

		$isFirst = false;
	}

	if ($multiselect){
		$html .= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>': '<li>')
				.'<label for="body_part_other">'
					.'<input type="checkbox" name="body_part" id="body_part_other" value="other" />'
					.'<span>Other</span>'
				.'</label>'
				.($bootstrap ? '</div>' : '</li>')."\n";
	}else{
		$html 	.= ($bootstrap ? '<div'.(!empty($bootstrapclass) ? ' class="'.$bootstrapclass.'"' : '').'>': '<li>')
		.'<label for="body_part_other" class="radio-inline"> <input type="radio" name="body_part" id="body_part_other" value="other" /> <span>Other</span></label>'
		.($bootstrap ? '</div>' : '</li>')."\n";
	}

	$html .= (!$bootstrap ? '</ul>' : '');

	return $html;

}

add_shortcode('show_body_parts', 'show_body_parts');

function show_mobile_body_parts($atts){
	$vars = shortcode_atts( array(
        		'multiple' => false,
        		'drop_down_text' => 'Please Select',
        		'el_class' => false
    ), $atts );

	if ($atts instanceof WPCF7_FormTag){
		foreach ($atts->options as $key => $value) {
			$vars[str_replace('=','',$value)] = $atts->raw_values[$key];
		}
	};

	$html = '';

	$parts = new SimpleXMLElement(file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml')));

	$class = '';
	if ($vars['el_class']) {
		$class = ' '.htmlentities($vars['el_class']).' ';
	}

	$isFirst = true;
	$html .= '<select name="body_part" class="body_parts'.$class.'" '.($vars['multiple'] ? 'multiple="multiple" size="3"' : '').'>';
	if (!$atts['multiple']){
		$html .= '<option value="">'.$vars['drop_down_text'].'</option>'."\n";
	}
	foreach ($parts->full_list->body_part as $parts){
		$attrs = $parts->attributes();

		$html .= '<option value="'.$attrs['id'].'">'.ucwords(preg_replace('/\s?injur(ies|y)/i','',$parts->name)).'</option>'."\n";

		$isFirst = false;
	}
	$html .= '<option value="other">Other</option>'."\n";
	$html .= '</select>';

	return $html;

}

add_shortcode('show_mobile_body_parts', 'show_mobile_body_parts');

function claim_value(){
	$html = '';

	$parts = new SimpleXMLElement(file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml')));

	if (isset($_REQUEST['body_part']) && is_array($_REQUEST['body_part']) && !empty($_REQUEST['body_part']) && !$_REQUEST['body_part'][0] == ''){
		//Do we have other in the array
		$other = in_array('other', $_REQUEST['body_part']);

		$html .= '<ul class="list_of_values">'."\n";
			foreach ($parts->full_list->body_part as $part){
				foreach ($_REQUEST['body_part'] as $body_part){
					$attrs = $part->attributes();
					if ($attrs['id'] == $body_part || $other){
						$html .= '<li><span class="body_name_part">'.$part->name."</span><ul class='injuries'>\n";
							foreach ($part->list->item as $item){
								$html .= '<li>'.type_description($item).'</li>'."\n";
							}
						$html .= '</li></ul>';
					}
				}
			}
		$html .= '</ul>'."\n";
	} elseif (!isset($_REQUEST['body_part']) || $_REQUEST['body_part'] == 'other' || empty($_REQUEST['body_part']) || (is_array($_REQUEST['body_part']) && $_REQUEST['body_part'][0] == '') ){
		$html .= '<ul class="list_of_values">'."\n";
		foreach ($parts->full_list->body_part as $part){
			$html .= '<li><span class="body_name_part">'.$part->name."</span><ul class='injuries'>\n";
				foreach ($part->list->item as $item){
					$html .= '<li>'.type_description($item)."\n";
				}
			$html .='</ul></li>'."\n";
		}
		$html .= '</ul>'."\n";
	}else{
		foreach ($parts->full_list->body_part as $part){
			$attrs = $part->attributes();

			if ($attrs['id'] == $_REQUEST['body_part']){
				break;
			}
		}

		$html .= '<ul class="list_of_values">'."\n";
		$html .= '<li><span class="body_name_part">'.$part->name."</span><ul class='injuries'>\n";
		foreach ($part->list->item as $item){
			$html .= '<li>'.type_description($item)."\n";
		}
		$html .='</ul></li>'."\n";
		$html .= '</ul>'."\n";
	}

	return $html;
}

add_shortcode('claim_value', 'claim_value');

function claim_type(){
	$html = '';

	$parts = new SimpleXMLElement(file_get_contents(get_site_url(null, '/xmldata/guidelines-2020.xml')));

	if (isset($_REQUEST['body_part']) && is_array($_REQUEST['body_part']) && !empty($_REQUEST['body_part'])) {
		$outParts = array();

		foreach ($parts->full_list->body_part as $part){
			$attrs = $part->attributes();

			foreach ($_REQUEST['body_part'] as $body_part){
				if ($attrs['id'] == $body_part){
					$outParts[] = strtolower(trim(preg_replace('/\s?injur(ies|y)/i','',$part->name)));
					break;
				}
			}
		}

		if (count($outParts) == 0){
			return 'Injury';
		}

		if (count($outParts) == 1){
			return $outParts[0].' injuries';
		}

		$lastone = array_pop($outParts);

		return implode(', ',$outParts).' and '.$lastone.' injuries';

	} elseif (isset($_REQUEST['body_part']) && $_REQUEST['body_part'] != 'other' && !empty($_REQUEST['body_part'])){
		foreach ($parts->full_list->body_part as $part){
			$attrs = $part->attributes();

			if ($attrs['id'] == $_REQUEST['body_part']){
				break;
			}
		}

		$html = strtolower(trim(preg_replace('/\s?injur(ies|y)/i','',$part->name))).' ';
	}

	if (empty($html)) {
		return 'Injury';
	}

	return $html.' injuries';
}

add_shortcode('claim_type','claim_type');

function type_description($item){
	$data = [];

	$data[] = '<div class="amounts">';

	if ($item->severity) $data[] = '<span class="severity">'.$item->severity.'</span>';

	if ($item->title) $data[] = '<h3 class="title">'.$item->title.'</h3>';

	$data[]	= '<span class="cost">'.$item->cost.'</span>';
	$data[]	= '<p class="description">'.$item->description.'</p>';

	$data[] = '</div>';

	return 	implode($data);
}

    As far as I can tell this code shouldn’t be adding the novalidate attribute to the forms though.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try removing the custom code.

    Thread Starter rokkashthomas

    (@rokkashthomas)

    I’ve disabled the custom code but the novalidate tag is still present. I’ve left it disabled in case you need to check anything.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    The novalidate attribute has nothing to do with your problem.

    Thread Starter rokkashthomas

    (@rokkashthomas)

    Ok, is there something else that could be causing the required fields/validation not to work then?

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    This is obviously the cause:

    // Change CF7 form actions to process.pl (for CRM integration)
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
function wpcf7_custom_form_action_url() {
    return 'https://www.accident-helpline.uk.com/cgi-bin/process.pl';
}

add_filter( 'wpcf7_load_js', '__return_false' );

    What do you intend to do with it?

    Thread Starter rokkashthomas

    (@rokkashthomas)

    The wpcf7_form_action_url code is used to post the form fields to a custom script which passes the data to a CRM.

    I’m not entirely sure why we’re disabling the JS (all the custom code was inherited from a previous build). Is that the bit that would be preventing validation?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Required fields not working’ is closed to new replies.