[Resuelto] CRED Fom validation of taxonomy fields

[Autor]

Mensajes

[Sanny]

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?

[Waqas Supporter Languages: Inglés (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.

[Sanny]

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?

[Waqas Supporter Languages: Inglés (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.

[Waqas Supporter Languages: Inglés (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.

[Sanny]

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?

[Waqas Supporter Languages: Inglés (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.

[Sanny]

All good now, thank you!!!!!