[Resolved] Adding Validation to Textarea in CRED Form

[Author]

Posts

[diamondA]

Hello! I am trying to adding a required validation to a textarea in my form and I'm having trouble with this. I saw another support ticket that gave a JS snippet but I'm not sure why it's not working.

Here's the form snippet
<div class="form-group">
<label>[cred_i18n name='position-summary-label']Position Summary<span style="color: red;">*</span>[/cred_i18n]</label>
[cred_field field='position-summary' force_type='field' class='form-control' output='bootstrap']
</div>

And my JS snippet
jQuery(document).ready(function($){

$("select[name='wpcf-salary-range'] option[value='']").text("Select range");
$("select[name='wpcf-on-site-location2'] option[value='']").text("Select location");

$( '' ).submit( function() {

// content
if ( $( "textarea[name='wpcf-position-summary']" ).val() == '<p> </p>' ) {
$( "textarea[name='wpcf-position-summary']" ).focus();
alert( "The content is required" );
return false;
}

} )

});

I appreciate your help!

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've performed some tests on my website and was able to make this work using these options:

1. Simpler option is to turn on the "Required" option in the field's settings, itself.
( screenshot: hidden link )

That required validation rule would automatically apply to that field in the Toolset form too.

2. If for some reason, you'd like to perform this using a custom script, you can include the following script in the form:

jQuery(document).ready(function($){
	$("textarea[name='wpcf-post-textarea']").prop("required", true);
});

Please replace "post-textarea" with your actual field's slug.

regards,
Waqar

[diamondA]

Hi Waqar,
Thank you so much! I think this is pretty close to what I need - I used the JS solution.

The only thing I noticed is that the textarea required alert is overriding my other required fields - is it possible to have the required message look the same across the fields? (I've included screenshots)

My best-case scenario would be for the textarea (the image with the yellow alert icon) to look like the required validation in the other screenshot with the blue focus border and red "this field is required" message. I hope this makes sense, I'm curious what you think would be the best solution.

Thank you!

[Waqar]

Thanks for writing back.

For consistency in how the error message is shown, you can go with the first option from my last reply, as that validation will be managed by the Forms plugin.

The second option just adds the required attribute to the text area input field and that validation is shown by the web browser (and not the Forms plugin). The validation and behavior, in this case, will vary based on the browser and device that is being used to view the form.

[diamondA]

Hmmm I see - I'm reluctant to create a new custom field because we've already been using the current field for a few months now and have a lot of data tied to it. I'm worried if I create a new field, it'll wipe the data we already have. Is there a way to map a new field to old data?

[diamondA]

The textarea field we are using is a WYSIWYG field so that people can apply formatting and I didn't see a "required" option in that field - I'm not sure that's available with the Multiple Lines field?

[Waqar]

For WYSIWYG type fields, there is no "Required" option available in the settings, but, you can use the "cred_form_validate" hook to validate them:
https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate

Example:

//Text-like fields (textarea, WYSIWYG) have only one value, which is the actual input text.
add_filter('cred_form_validate', 'validate_form_wyswyg');
function validate_form_wyswyg( $data ) {
    list($fields,$errors)=$data;        
    if (empty($fields['wpcf-post-textarea']['value'])) {
        $errors['wpcf-post-textarea'] = 'Missing post-textarea';
    }
    return array($fields,$errors);
}

Please replace "post-textarea" with your actual field's slug. The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

Note: this will not show the inline error message with the field but would show the error on the top of the form where combined errors are shown.