[Resolved] How to Set Fields in Blocks AJAX Search Form as Required

[Author]

Posts

[andrewF-6]

Tell us what you are trying to do?
I have an AJAX search form that displays the results on the same page. The search does not search the body of the post. The search is based on two fields "Surname" and "Card Number".

I would like both of these fields to be "Required" before displaying ANY result. I do not want default results displayed either. An entry must be made in both fields so that when Submit is clicked the search is performed against both fields such that both fields must jointly fulfil the search criteria.

Can we not easily set a field as required with Toolset Blocks? Is there a place to insert jQuery code for a field to make it required?
Thanks

What is the link to your site?
The site is currently under construction.

[Shane]

Hi Andrew,

Thank you for getting in touch.

Yes there is a section to add your custom JS in blocks, if you use the Block navigation at the top of your screen and then select your view.

Checking the Blocks tab and scrolling down you should see the custom css section, see screenshot.

Thanks,
Sha

[andrewF-6]

I have found it. Thank-you.

Can you tell me how to set a field in the search form as required?

Thanks

[Shane]

Hi Andrew,

I would need a link to the page to see what the classes for the fields are, however you can use this jQuery in the link below in order to make the fields required.
https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields

Please let me know if this helps.
Thanks,
Shane

[andrewF-6]

Hi Shane,

The page link is hidden link

Could you tell me what jQuery code to use and where to put it.

Thanks

[Shane]

Hi Andrew,

Unfortunately it seems that I need access to the page in order to see the form.

I've enabled the private fields for your next response so that you can provide me with some access to see the page.

Thanks,
Shane

[Shane]

Hi Andrew,

I've added the following code.

jQuery( document ).ready(function() {
jQuery("input[name=wpv-wpcf-surname]").prop('required',true);
jQuery("input[name=wpv-wpcf-card-number]").prop('required',true);

});

This will make the fields required, however in order for it to work the ajax submit for the search needs to be disabled.

Thanks,
Shane

[andrewF-6]

My issue is resolved now. Thank you!