Hello,
I have a user registration form with ajax submit.
Got some issues there and wanted to know if there is easy way around them. Its all related to front end validation and making non mandatory fields mandatory.
In my form besides some custom fields that work well I use the first_name and last_name fields. They don't have the mandatory option. The same is with password confirm field - user_pass2. Last one is a checkbox that I need to make not mandatory at creation for it not to append the * sign and later add manually the validation.
Was trying to add the data-wpt-validate on those fields but somehow its not working. There is also an issue where the back end validation removes the checked state from checkboxes. I got it in case the email was already used error msg. Is this a known issue? Here is an example code.
jQuery('input[name="first_name"]')
.data('wpt-validate', {
required: {
args: {
1: true
},
message: 'required text msg'
}
});
For reference i checked multiple posts where the closest one would be https://toolset.com/forums/topic/cred-front-end-validation/, the difference tho is not making a new validator, just reuse the one named 'required'.
Thanks.
Hello,
I have tried your example JS codes, there isn't similar problem as you mentioned above:
the email was already used error msg
If there is already a wordpress user using the same email address, you might try another email address, and test again.
And since the field "first_name" is not a required user field by default, same as in Toolset user form too, see our document:
https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_field
The attribute "required" is for parent selector field, there isn't such a built-in feature to setup "first_name" as a required field by default.
As a workaround, you can add a HTML attribute "required" to "first_name" field, for example:
jQuery('input[name="first_name"]').attr('required', 'required');
It can do similar thing in your case, see document:
hidden link
When present, it specifies that an input field must be filled out before submitting the form.
Hi, thanks for fast reply. I have tried the proposed solution but its a different way of validation and its inconsistent with the one that is on submit.
One of my attempts was to get the first_name into Toolset fields management and set there the mandatory rule, but unfortunately it didnt work. After some digging and testing how all works, I found the solution to most issues in documentation at hidden link (its the plugin that is used by Toolset for frontend validation). It is possible to add new validation rules even after the init of form validation. For example to make a field like user_pass2 what is used for confirm password all we need to do is run this jquery:
$('[name="user_pass2"]').rules( "add", {
required: true,
});
for fields with no validation at start as user pass already got the equalTo validator we need also to add the necessary class js-wpt-validate. The code for first_name field would be:
$('[name="first_name"]').addClass('js-wpt-validate');
$('[name="first_name"]').rules( "add", {
required: true,
});
With this I am now able to add the validators but there is a issue where it can be done after the plugin run validate method. For that the solution that is not the best but works well would be
$(document).on('click', '[name="form_submit_1"]' ,function(event) {
$('[name="first_name"]').addClass('js-wpt-validate');
$('[name="first_name"]').rules( "add", {
required: true,
});
//other validation rules here
});
This adds the rules on each click, but they dont get added x times, only once at initial run.
Please not that its connected to document. It could be other element that is not replaced by backend validation action.
With this there is still the issue where checkbox loses tick on backend validation reply, and also found out that password and confirm password doesn't get frontend validated after backend validation was fired once (we got some error and form reloaded but not to the same state as on 1st time).
For this I prepared a demo form at hidden link - if this could get hidden.
That form uses fixes from above and shows the 2 remaining issues that I think are bugs to be fixed.
To force the backend validation just fill the form with email test1@test1.com that is already in db, we get a email is used back end validation error and there you can see the broken parts.
Thanks. I hope its readable and understable ^^.
I suggest you try the JS event "cred_form_ready", for example:
jQuery(document).on('cred_form_ready', function() {
jQuery('[name="first_name"]').addClass('js-wpt-validate');
jQuery.validator.addClassRules("js-wpt-validate", {
required: true,
minlength: 2
});
});
More help:
hidden link
Nice one, had to insert it into this code and work's great
jQuery(document).ready(function() {
//...
});
Still there is the issue with checkboxes and password/confirm password. It looks like after back end validation is done, the form gets replaced and not all work's as before. Were you able to reproduce those 2 issues?
Thanks.
For other two issues:
1) checkboxes
How do you setup the custom checkbox field? If it is outputted from Toolset form shortcode:
[cred_field ...], you can try these:
a) Create a custom shortcode to populate the default value of "Policy" field:
add_shortcode('policy-value', function($atts, $content){
$res = '';
if(isset($_POST['wpcf-policy'])){
$res = $_POST['wpcf-policy'];
}
return $res;
});
b) setup attribute "value" in [cred_field ...] shortcode, like this:
[cred_field field='policy' force_type='field' class='form-control' output='bootstrap' value="[policy-value]"]
2) password/confirm password
I can duplicate the same problem, and have escalated it to our 2nd tier supporters, will update here if there is any news.
Hello,
Here is an update, the "password/confirm password" is fixed in Toolset form plugin version 2.4, which is under QA status, will be released soon.
