[Resolved] Struggling with JS client side form validation
This thread is resolved. Here is a description of the problem and solution.
Problem: I am trying to add some custom JavaScript form validation to a CRED form, but it doesn't seem to be working as expected.
Solution: Bind to the window.load event, not the document ready event, to initialize form event handlers. Use the jQuery namespace instead of "$" to access the jQuery object. Here is a template:
jQuery(window).bind('load', function() {
// Your custom validation code goes here using jQuery instead of $
});
This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
Im trying to ensure that a user completes a certain form field when editing at the front end, and Im using the following snippet of code to do so, however Im not having any luck.
What have I missed?
jQuery(document).ready(function($){
$("#cred_form_290_1").on("submit", function(){
var my_field = $("input[wpcf-edit-summary]").val();
if(my_field == "") {
alert("Please enter a value.");
$("input[wpcf-edit-summary]").focus();
return false;
}
});
});
PS - I dont want to set the field as required because this then becomes an annoyance when working in the admin backend.
Im working on localhost (testing) so I cant provide you with a URL, but I've stripped out the code for you below. (Ive trimmed this back a little so I didnt dump a whole lot of code here) Hopefully I havent missed anything.
Hi, Shane is unavailable today so I'd like to try to help. First, let's confirm the event listener is being added appropriately. Add an alert right inside the submit listener:
Assuming the ID #cred_form_290_1 is correct, you should see the alert when you submit the form. If not, then we can assume that the event listener is being bound before the CRED form is ready to accept event bindings. To fix that, you can try to listen to another event:
I can test a clone of your site if it's not available online. You can install the Duplicator plugin (its free) and create a clone, then post that archive on Dropbox or Drive somewhere and share a download link. If Duplicator is not a good option, you can try the WP All-in-One Migration plugin. The 3rd option is to provide a zip archive containing your plugins and theme folders and a SQL dump from your database. I can work from any of those 3 options. I will activate a private reply field here where you can share a download link confidentially. The field says "Duplicator package" but you can add any download link.
Three problems:
1. There is a syntax error in your JavaScript code, it's missing a closing });
2. You must wait for the window 'load' event to initialize your submit handler, otherwise CRED initialization will delete it.
3. The selector input[wpcf-revision-summary] is not correct.
Thank you so much for helping me, I really appreciate it.
<div class="form-group">
<label>Edit Summary (Briefly describe your changes)</label>
[cred_field field='revision-summary' post='vehicle' value='' urlparam='' class='form-control' output='bootstrap']
</div>
<div class="form-group">
[cred_generic_field field='agree' type='checkbox' class='' urlparam='']
{
"required":1,
"validate_format":0,
"checked":0,
"default":"1",
"label":"By submitting this change you agree to our terms of use"
}
[/cred_generic_field]
[cred_show_group if="($(agree) eq '1' )" mode='fade-slide']
PLEASE NOTE - All changes are reviewed by a moderator before being posted live, which is usually done within 24 hours if not sooner. Thank you for contributing.
[/cred_show_group]
</div>
