[Resolved] Set filter to required

[Author]

Posts

[Matthias Reichl]

Hi,

I´ve created for radio buttons / select filter for a view. How can I enable, that all these filters are required to be set before I can submit?

And a second question, which fits this topic also: is there any way to include a general option per filter, which says "I don´t know yet"? This general option should load all results from the selected filter and is similar to the default option "All".

Regards,

[Luo Yang]

Hello,

Yes, you are right, those two issues are related.

Q1) all these filters are required to be set before I can submit ...
There isn't such a feature within Views plugin, it needs custom JS codes, for example:
hidden link

So the best workaround is using the default option "All", see below Q2.

Q2) is there any way to include a general option per filter, which says "I don´t know yet"?
Yes, this is possible "Select" filter field, for example shortcode [wpv-control-post-taxonomy], attribute "default_label":
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-post-taxonomy
default_label (opt):
'default option text'
Add default option like All or Any on taxonomy select control.

[Matthias Reichl]

Hi,

thanks. Q2 is solved.

Regarding Q1:
- what form id should I use for this javascript? I´ve inserted the necessary scripts to my header.
- What is field: ID or is field the name:
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});

Regards,

[Luo Yang]

You can try the CSS class name "wpv-filter-form" of search form, for example:

$( "form.wpv-filter-form" ) ...

[Matthias Reichl]

Thanks, can you please show me an example with the further section? What have I to use for "field"?
This is my filter:

<div class="form-group">
	<label>[wpml-string context="wpv-views"]Für welches Projekt suchen Sie?[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="schwerpunkt" type="radios" default_label="Ich weiß es noch nicht." url_param="wpv-schwerpunkt"]
</div>

  <div class="form-group">
	<label>[wpml-string context="wpv-views"]Für welche Formen interessieren Sie sich?[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="form" type="radios" default_label="Ich weiß es noch nicht." url_param="wpv-dachform"]
</div>
<div class="form-group">
	<label>[wpml-string context="wpv-views"]Für welches Objekt suchen Sie [/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="projektart" type="radios" default_label="" url_param="wpv-projektart"]
</div>
<div class="form-group">
	<label>[wpml-string context="wpv-views"]In welchem Bundesland liegt ihr?[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="bundesland" type="select" default_label="Liste aller Bundesländer" url_param="wpv-bundesland"]
</div>

I´ve tried the code, but it doesn´t work at all. The scripts are not compatible to each other:
Uncaught TypeError: Cannot read property 'addMethod' of undefined
Uncaught TypeError: Cannot read property 'setDefaults' of undefined
I´ve added these scripts to my header:
<script src="hidden link"></script>
<script src="hidden link"></script>
<script src="hidden link"></script>

Regards,

[Luo Yang]

Since it is custom codes problem, please provide a test site with the same problem, I need to test and debug it in a live website

[Luo Yang]

For the JS errors you mentioned in private message box, it is your custom PHP codes in your theme/functions.php:

//* Enqueue Toolset Required
add_action( 'wp_enqueue_scripts', 'toolset_required' );
function toolset_required() {
    wp_enqueue_script( 'j-validate', '<em><u>hidden link</u></em>', array(), 20151215 );
    wp_enqueue_script( 'j-validate', '<em><u>hidden link</u></em>', array(), 20151215 );
    wp_enqueue_script( 'j-add-validate', '<em><u>hidden link</u></em>', array(), 20151215 );
}

I have changed it to:

//* Enqueue Toolset Required
add_action( 'wp_enqueue_scripts', 'toolset_required' );
function toolset_required() {
    //wp_enqueue_script( 'j-validate', '<em><u>hidden link</u></em>', array(), 20151215 );
    wp_enqueue_script( 'j-validate', '<em><u>hidden link</u></em>', array('jquery'), 20151215 );
    wp_enqueue_script( 'j-add-validate', '<em><u>hidden link</u></em>', array('jquery'), 20151215 );
}

Your website has already loaded JS file "jquery.js?ver=1.12.4", you don't need to load anther one.

For the custom JS codes in view "Partnersuche", you can follow their document to setup your own custom JS codes:
hidden link
See the live example codes of radio field:
hidden link

[Matthias Reichl]

Hi,

thanks - the errors are gone.

I tried your example, but it doesn´t seem to work with toolset. The error label is displayed till I click on submit, then it is hidden, but I cannot submit anyway - nothing happens any more.

Regards,

[Luo Yang]

I am checking it in your website, will update here if there is anything found

[Luo Yang]

There might be some conflict issues with your CSS codes, I have done below modification in your website:
Edit the view "Partnersuche":
hidden link
1) in section "Search and Pagination", edit your CSS codes, comment out those CSS codes:

/** input[type="radio"] {
    opacity:0.01;
    z-index:1;
  	display:none; 
}**/

2) Modify the JS codes, disable "debug":

jQuery(document).ready(function($) {
    jQuery.validator.setDefaults({
    	//debug: true,
    	success: "valid"
	});
    $( 'form.wpv-filter-form' ).validate({
      rules: {
        'wpv-schwerpunkt': {
          required: true
        },
        'wpv-dachform': {
          required: true
        },
        'wpv-projektart': {
          required: true
        }
      }
    });
});

Please test again, check if it is fixed. and it is only a demo for your reference, you will need to customize your own CSS codes.

[Matthias Reichl]

Hi,

thanks. Yes, it´s working now - partly. Have you got any idea, how I can translate "This field is required". Also it creates empty labels above the selected radio button, when I missed some field and tried to submit my query - see attached image.

At the search result page nothing is displayed. Finally when I hit the button "Planer suchen" again then the results are displayed. What could be wrong here, because that worked some time ago? Is this an incompatibility with the required JS?

Regards,

[Luo Yang]

For the new questions:
Q1) Have you got any idea, how I can translate "This field is required".

There isn't such feature within Toolset, I have searched it in google, found this thread:
https://stackoverflow.com/questions/39630386/translate-custom-jquery-validation-messages

For your reference

Q2) What could be wrong here, because that worked some time ago? Is this an incompatibility with the required JS?
there might be some CSS/JS compatibility problem in your website, I suggest you try to deactivate other plugins, switch to wordpress default theme, disable all other CSS/JS codes in the view, and test again.

if you still need assistance for the new questions, please create a new thread for it, that will help other users to find the answers.

[Matthias Reichl]

Hi,

thanks.

Q1 is resolved.
Q2: I will create a second ticket.
Q3: I think you haven´t mentioned my last question: Also it creates empty labels above the selected radio button, when I missed some field and tried to submit my query - see attached image. Have you any idea how to hide the empty label fields of the validator js?

Regards,

[Luo Yang]

Q3) The empty label is created by "jqueryvalidation", you can use CSS codes to hide the empty label, for example:

label.error:empty {
  display:none !important;
} 

[Matthias Reichl]

My issue is resolved now. Thank you!