Select Option Display vs Value as Rendered to HTML

  • Resolved decisivedesign

    (@decisivedesign)


    9 years, 9 months ago

    I have a form that requires an address – thus a “State” select drop down.

    I am sending this form via JSON to the client before the form validates and sends the email, etc.

    The client requires the two letter state abbreviation (value) to be sent to their system, but wants to display the full state name.

    So, what we want is
    <option value="AL">Alabama</option>

    Which is what you would expect to be rendered to the html when you use the following in CF7
    [select* State "Alabama|AL"]

    However, what renders to the browser is actually
    <option value="Alabama">Alabama</option>

    If I use [State] in the email output, it reports “AL,” but I’m pulling directly from the value on-page and need it to be what I’m telling it to be.

    Because of this, I have been forced to pull out the CF7 rendered HTML, create my own custom shortcode, and edit the option values manually.

    As you can imagine, this is inefficient (it’s a loan application with tons of fields). I’m open to other suggestions, but this was the only way to do it that I could figure out.

    Now, I am trying to add some custom validation to various fields, and the fact that I had to pull out the HTML manually seems to be stopping WPCF7_Shortcode from working properly for custom validation. So now I’m stuck…

    Please advise – I’d like the input values to be rendered to the page (solves my problem entirely) or a better way/workaround to accomplish this.

    Thanks,

    https://www.ads-software.com/plugins/contact-form-7/

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

    (@takayukister)

    Try defining your own form-tag.

    Developer’s Cookbook: Adding A Custom Form-Tag

    Thread Starter decisivedesign

    (@decisivedesign)

    Thanks for your response Takayuki Miyoshi.

    So I’ve put together what I thought would work for this, based on your simple example of creating a custom form tag. It appears that I’m missing something (I wouldn’t call myself a php developer).

    All I’m trying to do is add some validation to a social security field.

    Here’s what I have. Please let me know what I’m doing wrong here.

    The tag itself in CF7 is:
    [SSN* SSN minlength:9 maxlength:11 placeholder “SSN”]

    //SSN Custom Validation

add_action( 'wpcf7_init', 'custom_add_shortcode_SSN');
function custom_add_shortcode_SSN() {
	wpcf7_add_shortcode('SSN', 'custom_ssn_validation_filter', true);
}

add_filter( 'wpcf7_validate_SSN*', 'custom_ssn_validation_filter', 10, 2 );

function custom_ssn_validation_filter( $result, $tag ) {
    $tag = 'SSN';

    if ( 'SSN' == $tag->name ) {
		if (!preg_match('/^\(?\d{3}\)?-?.? *\d{2}-?.? *-?\d{4}$/', $_POST['SSN'] )) {
				$result->invalidate( $tag, "SSN format: ###-##-#### or #########" );
			}
    }
    return $result;
}
    Thread Starter decisivedesign

    (@decisivedesign)

    Do I need to build out the entire tag (html, validation, default classes, etc) like, for example, in your date.php file where you define the date tag for this to work?

    Why don’t the select options/values just render to the page source like you would expect so I could avoid all this shenanigans?

    Thread Starter decisivedesign

    (@decisivedesign)

    The answer to my above question was yes.

    I went in and copied the core code from date.php (i think) and created, for my purposes, a “SSN” custom form tag…

    Code looks like this, for reference.

    // #####################################################################
// ADD SSN TAG/FIELD & Validation
// #####################################################################
add_action( 'wpcf7_init', 'wpcf7_add_shortcode_ssn' );

function wpcf7_add_shortcode_ssn() {
	wpcf7_add_shortcode( array( 'ssn', 'ssn*' ),
		'wpcf7_ssn_shortcode_handler', true );
}

function wpcf7_ssn_shortcode_handler( $tag ) {
	$tag = new WPCF7_Shortcode( $tag );

	if ( empty( $tag->name ) )
		return '';

	$validation_error = wpcf7_get_validation_error( $tag->name );

	$class = wpcf7_form_controls_class( $tag->type );

	$class .= ' wpcf7-validates-as-ssn';

	if ( $validation_error )
		$class .= ' wpcf7-not-valid';

	$atts = array();

	$atts['class'] = $tag->get_class_option( $class );
	$atts['id'] = $tag->get_id_option();
	$atts['maxlength'] = $tag->get_maxlength_option();
	$atts['minlength'] = $tag->get_minlength_option();

	if ( $tag->has_option( 'readonly' ) )
		$atts['readonly'] = 'readonly';

	if ( $tag->is_required() )
		$atts['aria-required'] = 'true';

	$atts['aria-invalid'] = $validation_error ? 'true' : 'false';

	$value = (string) reset( $tag->values );

	if ( $tag->has_option( 'placeholder' ) || $tag->has_option( 'watermark' ) ) {
		$atts['placeholder'] = $value;
		$value = '';
	}

	$value = $tag->get_default_option( $value );

	$value = wpcf7_get_hangover( $tag->name, $value );

	$atts['value'] = $value;

	if ( wpcf7_support_html5() ) {
		$atts['type'] = $tag->basetype;
	} else {
		$atts['type'] = 'text';
	}

	$atts['name'] = $tag->name;

	$atts = wpcf7_format_atts( $atts );

	$html = sprintf(
		'<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s</span>',
		sanitize_html_class( $tag->name ), $atts, $validation_error );

	return $html;
}

/* Validation filter */

add_filter( 'wpcf7_validate_ssn', 'wpcf7_ssn_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_ssn*', 'wpcf7_ssn_validation_filter', 10, 2 );

function wpcf7_ssn_validation_filter( $result, $tag ) {
	$tag = new WPCF7_Shortcode( $tag );

	$name = $tag->name;

	$value = isset( $_POST[$name] )
		? trim( strtr( (string) $_POST[$name], "\n", " " ) )
		: '';

	if ( ! empty( $value ) ) {
		$maxlength = $tag->get_maxlength_option();
		$minlength = $tag->get_minlength_option();

		if ( $maxlength && $minlength && $maxlength < $minlength ) {
			$maxlength = $minlength = null;
		}

		$code_units = wpcf7_count_code_units( $value );

		if ( false !== $code_units ) {
			if ( $maxlength && $maxlength < $code_units ) {
				$result->invalidate( $tag, wpcf7_get_message( 'invalid_too_long' ) );
			} elseif ( $minlength && $code_units < $minlength ) {
				$result->invalidate( $tag, wpcf7_get_message( 'invalid_too_short' ) );
			}
		}
	}

	if ( $tag->is_required() && '' == $value ) {
		$result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) );
	}elseif (!preg_match('/^((?!666|000|9d{2})\d{3}(-?|\.?|\s?)\d{2}(-?|\.?|\s?)\d{4})$/', $_POST['SSN'] )) {
				$result->invalidate( $tag, "SSN format: ###-##-#### or #########" );
	}
	return $result;
}
/* Messages */

add_filter( 'wpcf7_messages', 'wpcf7_ssn_messages' );

function wpcf7_ssn_messages( $messages ) {
	return array_merge( $messages, array(
		'invalid_ssn' => array(
			'description' => __( "SSN format that the sender entered is invalid", 'contact-form-7' ),
			'default' => __( 'ssn format seems invalid.', 'contact-form-7' )
		) ) );
}
// #####################################################################
// END SSN TAG/FIELD & Validation
// #####################################################################
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Select Option Display vs Value as Rendered to HTML’ is closed to new replies.