Skip Navigation

[Résolu] CRED Fom validation of taxonomy fields

This support ticket is created Il y a 6 années et 11 mois. 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.

Marqué : 

This topic contains 22 réponses, has 2 voix.

Last updated by Sanny Il y a 6 années et 10 mois.

Assigned support staff: Waqas.

Auteur
Publications
#334375
validation.png

Sorry but I dont see that.
Attached is what I see when I try to save the form completely blank (I hid some of the text since it's sensitive data).
Im expecting to see the errors above each field, like for the other fields.

Was there anything else you changed, besides the function in custom.php?

#334494

Waqas
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for providing the screen shot, I got it what you are referring too. You are actually asking for inline validation before actually the form is submitted to the server. While my implementation was based on when the form has been submitted and received by CRED for processing.

Anyhow, this requires JavaScript based implementation. I have added following JavaScript to the form:

$("form.cred-form").on("submit", function(e){
  e.preventDefault();
  
  var selectArray = ["pg-rate-type", "pg-rate-audit", "pg-mandatory-optional"];
  
  for(var i=0; i<selectArray.length; i++) {
    var c = $("select[name='"+selectArray[i]+"[]']");
    var v = c.val();
    var id = c.attr("id");
    var err = '<label for="'+id+'" class="my-error '+id+'">This field is required</label>';
    
    if(v==''){
      removeError(id);
      
      $(c).before(err);
      
      $(c).on("blur", function(e){
        if($(this).val() != "") {
          removeError($(this).attr("id"));
        }
      });
    }
  }
});

function removeError(t) {
	$("."+t).remove("label.my-error");
}

It targets 3 fields only (Rate Type, Rate Audit, Mandatory or Optional). I selected these fields for demonstration purposes, so you can add more as required. You can also do almost the same to iterate through the checkboxes fields.

I also added following CSS to look the error like the standard one.

.my-error {
	background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}

Please see JS and CSS editors of the CRED form, to edit the above mentioned code.

#334614

Thank you so much!
Would you please also add a checkbox example in there?
The ones I need to be validated are

if (empty($fields['pg-brand']['value']))  {
            $errors['pg-brand'] = 'This field is required';
        } 
        if (empty($fields['pg-hotel-type']['value']))  {
            $errors['pg-hotel-type'] = 'This field is required';
        }
        if (empty($fields['pg-spg-level']['value']))  {
            $errors['pg-spg-level'] = 'This field is required';
        }

but if you want, you can only add one of them, and Ill add the rest following your example.

Also, the function you added in custom.php... what is it for exactly? do we still need it?

#334986

Waqas
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

Sure, please allow me sometime and I will update you around this.

The code in functions.php is to apply the appropriate validation on CRED level. This is also useful, if at some time, a user bypasses JavaScript validation. In such an event, the PHP/CRED level validation (in functions.php) will take care of this.

However, this is your choice, you can disable the code in functions.php if not required.

#335127

Waqas
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

Please see it working for "Brands" checkboxes field. I have added following code in JS editor of the form:

        // For Checkboxes
      	var checkArray = ["pg-brand"];
      
      	for(var i=0; i<checkArray.length; i++) {
			var c = $("input[name='"+checkArray[i]+"[]']");
	        var chkd = $("input[name='"+checkArray[i]+"[]']:checked").length;
     		var id = c.attr("id");
          	var err = '<label for="'+id+'" class="my-error '+id+'">This field is required</label>';
          	//var errPlace = $("ul.wpt-form-set-checkboxes-"+checkArray[i]);

	        if(chkd<=0){
              	removeError(id);
              
                $("ul.wpt-form-set-checkboxes-"+checkArray[i]).before(err);
              
              $(c).on("change", function(e){
                if($(this).val() != "") {
	                removeError($(this).attr("id"));
                }
              });
			}
		}

You should add the required checkboxes fields to checkArray, just like it is with the selectArray (for SELECT fields). I hope you can add more controls as needed.

#335508

Works great! Thank you!

One problem though: I updated the JS with the other checkboxes AND I updated the form.
Went back to the cred form in backend and the JS is all messed up now. Looks like it didnt escape the characters.

Could you please check why it's doing that?

#335752

Waqas
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

I am sorry to hear that, may be some operation corrupted the content in the middle.

However, You can copy the code from:

- https://toolset.com/forums/topic/cred-fom-validation-of-taxonomy-fields/page/2/#post-334494
- https://toolset.com/forums/topic/cred-fom-validation-of-taxonomy-fields/page/2/#post-335127

These are the same 2 replies you can find above this message. And replace with existing code in the JS editor. I hope this will help fixing the issue.

#336038

All good now, thank you!!!!!