|
infinityKMS
|
July 28, 2016 at 8:46 am
Hi
I’m using Event Espresso 4.9.1.p and have been trying to get custom validation on the registration form.
Currently I added validation to our custom js file which is run on submit click as follows:
$(‘#spco-go-to-step-finalize_registration-submit’).click(function() {
The custom js file is above the event espresso espresso_core.js.
I am able to do the validation checking. The challenge I have is ensuring the form does not submit if there is an error & how to display the error. If possible, I would like the error below the label like other errors and also in the error pop-up.
If I find an error, I stop the submit with “return false;”. The problem with this is that the default event espresso validation then does not run.
I need advice regarding where to add the custom error checking (should it rather go to the functions.php or inside the event espresso plugin files) and how to make it work together with the event espresso validation.
Thanks.
|
|
Josh
|
July 28, 2016 at 12:10 pm
Your custom code should never go inside the Event Espresso plugin files.
A recommended way to extend the jQuery validate plugin is use wp_add_inline_script() the function. Here’s an example of how to use this:
<?php
function my_custom_jquery_validator(){
wp_add_inline_script(
'jquery-validate',
'// your custom JavaScript code goes here'
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_jquery_validator', 50 );
|
|
infinityKMS
|
August 2, 2016 at 2:30 am
Hi Josh,
Thanks for your response. I have tried implementing the solutions but with no luck.
I also used info form the following posts:
https://gist.github.com/Apina/bc1b19ff2f3c3b73b369#comment-1309263
https://gist.github.com/lorenzocaum/e39ba6aa9ec60a59fc93
I have uploaded my progress for you to check
http://www.thebigwalk.co.za/demo/registration-checkout/#checkout
I have to add various validation rules but for now, I want to make the ID number 13 characters long. I can do the rules by myself if the execution can work. If you check the source code, you will see my JS. The code in my functions.php is al follows.
function my_custom_jquery_validator(){
wp_add_inline_script(
‘jquery-validate’,
‘
$(document).ready(function() {
var value = $(\’label:contains(“ID Number”)\’).parent().find(\’input\’).val();
var idnumber_id = $(\’label:contains(“ID Number”)\’).parent().find(\’input\’).attr(\’id\’);
$(“#spco-go-to-step-finalize_registration-submit”).validate();
$(“#ee_reg_qstn-5935-11”).rules(“add”, {
required: true,
digits: true,
minlength: 5,
maxlength: 5
});
});
‘
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_custom_jquery_validator’,50 );
I receive the following error:
TypeError: a.data(…) is undefined
http://localhost/dsrems/wp-content/plugins/event-espresso-core-reg/core/templates/global_assets/scripts/jquery.validate.min.js?ver=1.15.0
You will only be able to test on one page load as the ID number of the fields (ee_reg_qstn-5935-11) changes with each page load. In the JS, I could get the current ID but don’t know the syntax to add it to the rules call.
Your help will be highly appreciated.
|
|
Lorenzo Orlando Caum
|
August 2, 2016 at 6:13 am
Hello,
Could you summarize what your custom validation does during registration checkout? Is it checking for a whole number?
The first link that you mentioned is for validating a US phone. That is now part of the core plugin and is available as a question type through the question editor.
The second link uses an external library to help with common email typos.
—
Lorenzo
|
|
infinityKMS
|
August 2, 2016 at 6:26 am
Hi Lorenzo,
The validation needs to check that the ID number field is only digits and 13 characters in length. There is more validation but I can write the different validation.
The challenge I am experience is where & how to add the validation so that it works with the default validation without an conflicts. I am experiencing the challenges I highlighted in my two posts.
The event – http://www.thebigwalk.co.za/demo/events/2016-big-walk/
Thanks,
Kisten
|
|
Josh
|
August 3, 2016 at 12:03 pm
Hi there,
Instead of trying to target the input using an ID selector, you can target its class (eg. .ee-reg-qstn-11).
|
|
infinityKMS
|
August 4, 2016 at 3:06 am
Hi Josh,
Thanks for you reply, that solves one issue but does not deal with the main problem I am having.
My validation code is much cleaner now but the JS error I added in my first post is still there.
Please view the JS script on the page. Am I doing something wrong? The validation code seems straightforward.
Regards,
Kisten
|
|
Josh
|
August 4, 2016 at 8:51 am
Yes, there are a two things that need to be fixed in your code. Here’s the code in its present state:
$(document).ready(function() {
$("#spco-go-to-step-finalize_registration-submit").validate();
$(".ee-reg-qstn-11").rules("add", {
required: true,
digits: true,
minlength: 13,
maxlength: 13
});
});
This:
$(document).ready(function() {
jQuery should be loaded in no conflict mode here or you’ll probably get conflicts, so you do this instead:
jQuery(document).ready(function($) {
Then this:
$("#spco-go-to-step-finalize_registration-submit").validate();
The validate() method needs to have the form selected not the form submit, so you can change it to this:
$("#ee-spco-attendee_information-reg-step-form").validate();
More info:
https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/
https://jqueryvalidation.org/validate/
|
