Code output not W3C valid

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author James Laws

    (@jameslaws)

    We try to assist everyone who asks for support but as we’ve stated in this sticky thread, we don’t offer support on these forums. This is to help us provide support more efficiently by keeping it all in one channel.

    If you would like support from the developers you can follow the support link it provides and we’d be happy to assist you.

    If you are happy waiting here to see if someone else can assist you you are welcome to do that as well.

    That link doesn’t work.

    Has anyone solved this? Im getting errors with the rel element e.g:

    Line 57, Column 118: Bad value 9 for attribute rel on element input: The string 9 is not an absolute URL.

    …ninja_forms_field_9″ type=”text” class=”ninja-forms-field ” value=”” rel=”9″ />

    Syntax of absolute URL:
    An absolute URL. For example: https://example.org/hello, but not /hello. Spaces should be escaped as %20.

    Yes I’m also seeing that validation error. Not sure if Ninja is using rel somehow but they seem to increment it for each field produced. We might be stuck with it for now?

    hi Got a few validation errors with Ninja Forms because I created a quick contact form on the front page.

    First:
    When you are not submitting the form with Ajax, the action attribute is missing a value. This value should be set to url of the page you are on at least.

    Second:
    ninja forms output links to CSS and all the other stuff of the plugin in the <body> of the website and should really be in the <head>. Although with HTML5 is deemed ok, the 3WC validation does not like this. The W3C Validator has not caught up with everything just yet.
    So trigger the plugin to be higher up the scale.

    Third:
    As above… Bad value 9 for attribute rel on element input: The string 9 is not an absolute URL.
    …submit” name=”” class=”ninja-forms-field ” value=”Processing” rel=”9″ disabled>

    The same goes for any input field using the rel attribute in this way.
    Why not create an HTML5 data binding attribute for this and use this instead. Like data-field-id=”9″ you can use this databinding to still send the same information via Ajax instead of using the rel.

    Thanks

    Andi

    Actually checking the file the scripts are suppost to include in the head as the enqeue_script attribute to load in the foot is not present. So another plugin must be interfering.

    Ok well I don’t get it as I tried deactivating the plugins and changing the theme to a standard one. If the shortcode is on the page then the scripts are included then, which would make sense.

    We can remove actions and add them again.
    The other option I’m guessing is to un-enque the CSS only and add theme the theme itself and add them there.

    Ok the way to solve issue 2:
    Put the Ninja form url into the HEAD

    remove_action( 'ninja_forms_display_css', 'ninja_forms_display_css');
add_action( 'init', 'ninja_forms_display_css_amend', 10, 2 );
function ninja_forms_display_css_amend(){
	wp_enqueue_style( 'regencykitchens-style-ninja-a', NINJA_FORMS_URL .'css/ninja-forms-display.css' );
	wp_enqueue_style( 'regencykitchens-style-ninja-b', NINJA_FORMS_URL .'css/qtip.css' );
	wp_enqueue_style( 'regencykitchens-style-ninja-c', NINJA_FORMS_URL .'css/jquery.rating.css' );
}

    The JS can be left where it is.

    We can also resolve the other issues in a similar way:

    function ninja_forms_register_display_open_form_tag_override($form_id) {
	/// 1 - remove and add form open tag and make sure the URL is the same
	remove_action('ninja_forms_display_open_form_tag', 'ninja_forms_display_open_form_tag');
	add_action('ninja_forms_display_open_form_tag', 'ninja_forms_display_open_form_tag_amend');

}
add_action( 'init', 'ninja_forms_register_display_open_form_tag_override' );

function ninja_forms_display_open_form_tag_amend( $form_id ) {

	/// We need to get the post in order to know which page we are on
	global $post;

	$form_row = ninja_forms_get_form_by_id( $form_id );

	if ( isset ( $form_row['data']['ajax'] ) )
		$ajax = $form_row['data']['ajax'];
	else
		$ajax = 0;

	if ( $ajax == 1 ) {
		if( is_ssl() ) {
			$url = admin_url( 'admin-ajax.php', 'https' );
		}
		else {
			$url = admin_url( 'admin-ajax.php', 'http' );
		}
		$url = apply_filters( 'ninja_forms_ajax_url', $url, $form_id );
		$url = add_query_arg( 'action', 'ninja_forms_ajax_submit', $url );
		//$url = add_query_arg('action', 'test', $url);
	} else {
		/// This was added to make the form is posted back to the same page. - THE ORIGNAL SCRIPT is just a blank string
		$url = get_permalink( $post->ID );//'';
	}

	$display = 1;

	$display = apply_filters( 'ninja_forms_display_form_visibility', $display, $form_id );

	if ( $display != 1 )
		$hide_class = " ninja-forms-no-display";
	else
		$hide_class = "";

	$form_class = '';

	$form_class = apply_filters( 'ninja_forms_form_class', $form_class, $form_id );

	if ( ! empty( $form_class ) )
		$form_class = ' ' . $form_class;

	?>
	<form id="ninja_forms_form_<?php echo $form_id;?>" enctype="multipart/form-data" method="post" name="" action="<?php echo $url;?>" class="ninja-forms-form<?php echo $form_class;?><?php echo $hide_class;?>">

	<?php

}

    This then leaves the issue in the post which can also be amended.
    However I do not yet know the reason for having the rel as the field ID – it may be to do with how the form saves, so doing this below may/may not affect it (Ajax or no)

    SO – change rel to data binding attribute…

    /// 2 - Swap the rel attribute with a data binding attribute - This for no ajax forms
remove_action('init','ninja_forms_register_field_textbox' );
add_action( 'init', 'ninja_forms_register_field_textbox_amend' );
remove_action('init','ninja_forms_register_field_submit' );
add_action('init', 'ninja_forms_register_field_submit_amend');

function ninja_forms_register_field_textbox_amend(){
	$args = array(
		'name' => __( 'Textbox', 'ninja-forms' ),
		'sidebar' => 'template_fields',
		'edit_function' => 'ninja_forms_field_text_edit',
		'edit_options' => array(
			array(
				'type' => 'checkbox',
				'name' => 'datepicker',
				'label' => __( 'Datepicker', 'ninja-forms' ),
			),
			array(
				'type' => 'checkbox',
				'name' => 'email',
				'label' => __( 'Validate as an email address? (Field must be required)', 'ninja-forms' ),
			),
			// array(
			// 	'type' => 'checkbox',
			// 	'name' => 'send_email',
			// 	'label' => __( 'Send a response email to this email address?', 'ninja-forms' ),
			// ),
			// array(
			// 	'type' => 'checkbox',
			// 	'name' => 'from_email',
			// 	'label' => __( 'Use this as the "From" email address for Administrative recipients of this form?', 'ninja-forms' ),
			// ),
			// array(
			// 	'type' => 'checkbox',
			// 	'name' => 'replyto_email',
			// 	'label' => __( 'Use this email address as the Reply-To address?', 'ninja-forms' ),
			// ),
			array(
				'type' => 'hidden',
				'name' => 'first_name',
			),
			array(
				'type' => 'hidden',
				'name' => 'last_name',
			),
			// array(
			// 	'type' => 'checkbox',
			// 	'name' => 'from_name',
			// 	'label' => __( 'Use this as the "From" and Reply-To email name for Administrative recipients of this form?', 'ninja-forms' ),
			// ),
			array(
				'type' => 'hidden',
				'name' => 'user_address_1',
			),
			array(
				'type' => 'hidden',
				'name' => 'user_address_2',
			),
			array(
				'type' => 'hidden',
				'name' => 'user_city',
			),
			array(
				'type' => 'hidden',
				'name' => 'user_zip',
			),
			array(
				'type' => 'hidden',
				'name' => 'user_phone',
			),
			array(
				'type' => 'hidden',
				'name' => 'user_email',
			),
			array(
				'type' => 'hidden',
				'name' => 'user_info_field_group',
				'default' => 1,
			),
			array(
				'type' => 'checkbox',
				'label' => __( 'This is the user\'s state', 'ninja-forms' ),
				'name' => 'user_state',
			),
		),
		'display_function' => 'ninja_forms_field_text_display_amend', ///// <--- THIS IS WHAT WE HAVE TO AMEND I put a suffix as _amend (the function is below this)
		'save_function' => '',
		'group' => 'standard_fields',
		'edit_label' => true,
		'edit_label_pos' => true,
		'edit_req' => true,
		'edit_custom_class' => true,
		'edit_help' => true,
		'edit_desc' => true,
		'edit_meta' => false,
		'edit_conditional' => true,
		'conditional' => array(
			'value' => array(
				'type' => 'text',
			),
		),
		'pre_process' => 'ninja_forms_field_text_pre_process',
		'edit_sub_value' => 'nf_field_text_edit_sub_value',
		'sub_table_value' => 'nf_field_text_sub_table_value',
	);

	ninja_forms_register_field( '_text', $args );
}

function ninja_forms_field_text_display_amend( $field_id, $data, $form_id = '' ){
	global $current_user;
	$field_class = ninja_forms_get_field_class( $field_id, $form_id );

	if ( isset( $data['email'] ) && $data['email'] == 1 ) {
		$field_class .= ' email';
	}

	if(isset($data['default_value'])){
		$default_value = $data['default_value'];
	}else{
		$default_value = '';
	}

	if(isset($data['label_pos'])){
		$label_pos = $data['label_pos'];
	}else{
		$label_pos = "left";
	}

	if(isset($data['label'])){
		$label = $data['label'];
	}else{
		$label = '';
	}

	if( isset( $data['mask'] ) ){
		$mask = $data['mask'];
	}else{
		$mask = '';
	}	

	if( isset( $data['input_limit'] ) ){
		$input_limit = $data['input_limit'];
	}else{
		$input_limit = '';
	}

	if( isset( $data['input_limit_type'] ) ){
		$input_limit_type = $data['input_limit_type'];
	}else{
		$input_limit_type = '';
	}

	if( isset( $data['input_limit_msg'] ) ){
		$input_limit_msg = $data['input_limit_msg'];
	}else{
		$input_limit_msg = '';
	}

	switch( $mask ){
		case '':
			$mask_class = '';
			break;
		case 'date':
			$mask_class = 'ninja-forms-date';
			break;
		case 'currency':
			$mask_class =  'ninja-forms-currency';
			break;
		default:
			$mask_class = 'ninja-forms-mask';
			break;
	}

	if( isset( $data['datepicker'] ) AND $data['datepicker'] == 1 ){
		$mask_class = 'ninja-forms-datepicker';
	}

	?>
	<input id="ninja_forms_field_<?php echo $field_id;?>" data-mask="<?php echo $mask;?>" data-input-limit="<?php echo $input_limit;?>" data-input-limit-type="<?php echo $input_limit_type;?>" data-input-limit-msg="<?php echo $input_limit_msg;?>" name="ninja_forms_field_<?php echo $field_id;?>" type="text" class="<?php echo $field_class;?> <?php echo $mask_class;?>" value="<?php echo $default_value;?>" data-field-id="<?php echo $field_id;?>" /> <!-- !!!!!!! HERE I CHANGED rel= to data-field-id -->
	<?php

}

function ninja_forms_register_field_submit_amend(){
	$args = array(
		'name' => __( 'Submit', 'ninja-forms' ),
		'display_function' => 'ninja_forms_field_submit_display_amend',
		'group' => 'standard_fields',
		'edit_label' => true,
		'edit_label_pos' => false,
		'edit_req' => false,
		'edit_custom_class' => true,
		'edit_help' => true,
		'edit_meta' => false,
		'sidebar' => 'template_fields',
		'display_label' => false,
		'edit_conditional' => true,
		'conditional' => array(
			'value' => array(
				'type' => 'text',
			),
		),
		'process_field' => false,
		'limit' => 1,
	);

	ninja_forms_register_field('_submit', $args);
}

function ninja_forms_field_submit_display_amend( $field_id, $data, $form_id = '' ){
	global $ninja_forms_loading, $ninja_forms_processing;

	if ( isset ( $ninja_forms_loading ) ) {
		$form_id = $ninja_forms_loading->get_form_ID();
	} else {
		$form_id = $ninja_forms_processing->get_form_ID();
	}

	if(isset($data['show_field'])){
		$show_field = $data['show_field'];
	}else{
		$show_field = true;
	}

	$field_class = ninja_forms_get_field_class( $field_id, $form_id );
	if(isset($data['label']) AND $data['label'] != ''){
		$label = $data['label'];
	}else{
		$label = 'Submit';
	}
	$plugin_settings = nf_get_settings();
	if ( isset ( $plugin_settings['process_label'] ) ) {
		$processing_msg = $plugin_settings['process_label'];
	}
	?>
	<div id="nf_submit_<?php echo $form_id; ?>">
		<input type="submit" name="_ninja_forms_field_<?php echo $field_id;?>" class="<?php echo $field_class;?>" id="ninja_forms_field_<?php echo $field_id;?>" value="<?php echo $label;?>" data-field-id="<?php echo $field_id;?>" >
	</div>
	<div id="nf_processing_<?php echo $form_id; ?>" style="display:none;">
		<input type="submit" name="" class="<?php echo $field_class; ?>" value="<?php echo $processing_msg; ?>" data-field-id="<?php echo $field_id;?>" disabled>
	</div>
	<?php

}

    Ok I just tested the above.

    Works fine and fixes the errors from the W3C and still works if you save the form with AJAX.

    Maybe Ninja Forms would take some of these fixes and integrate them into the original functions.

    Thanks

    Andi

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Code output not W3C valid’ is closed to new replies.

Tags