[Set red border for validation errors when floatLabelType is set to Always]

[Ciprian-Catalin]

Hello,

I have some SCSS code applied to the form controls, which makes the borders of the controls red if there are validation errors on the form. However, this code works only if the floatLabelType is set to Auto. If I set it to Always, the following code doesn't change the border color. Is there another hierarchy or other classes for the floatLabelType=Always case? Thank you.

.ng-invalid.e-control .e-control-wrapper.e-outline:not(.e-input-focus):not(:has(label.e-label-top)),

ejs-numerictextbox.ng-invalid .e-float-input.e-numeric.e-control-wrapper.e-outline:not(.e-input-focus):has(label.e-label-bottom),

.e-checkbox-wrapper .ng-invalid + .e-frame,

.radio-buttons .form-check .ng-invalid.form-check-input{

  border-color: red !important;

}

div.e-float-input.e-control-wrapper.required label.e-float-text .e-float-text-content::after,

.radio-buttons.required > label::after,

.radio-buttons.required span::after,

.e-checkbox-wrapper label:has(.required)::after {

  content: '*' !important;

  color: red !important;

}

//required class added at parent level by ngClass

.e-control.required .e-float-input.e-control-wrapper label.e-float-text .e-float-text-content::after,

.required div.e-float-input.e-control-wrapper label.e-float-text .e-float-text-content::after{

  content: '*';

  color: red;

}

[Priyanka Karthikeyan]

Hi Ciprian-Catalin,

Thank you for reaching out to us. 

Below are the styles you can use to set the color for the textbox border when validation fails. Please refer to the code snippet and sample provided for a better understanding.

.ng-invalid.ng-dirty .e-outline.e-float-input {

  border-right-color :red !important;

  border-left-color :red !important;

  border-bottom-color :red !important;

}

.ng-invalid.ng-dirty label.e-float-text::before,

.ng-invalid.ng-dirty label .e-float-text-content,

.ng-invalid.ng-dirty label.e-float-text::after {

  border-top-color :red !important;

  color: red !important

}

Sample: https://stackblitz.com/edit/angular-qpskyh-4tcm7d?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css,src%2Findex.html

If you encounter any further issues, please share the modified sample and provide steps to replicate the problem for better assistance. Thank you for your understanding and cooperation.

Regards,

Priyanka K

[Ciprian-Catalin]

Hi,

I've created another stackblitz project with the package versions matching those in our real application.

The problem is that the code you provided only works when the user interacts with the control, specifically when the required validator is used. So, if I set the required validator to the form control, the border will only turn red after the user sets a value in the control and then removes it. I need the red border to always appear when the control doesn't have a value, especially for cases when the control has floatLabelType set to 'Always'.

In my stackblitz, I've added two controls: one with floatLabelType set to 'Always', and the other with floatLabelType set to 'Auto'. Additionally, in the global_styles.css file, I've included CSS code for both cases to illustrate the difference.

Could you please review and assist with resolving this issue?

https://stackblitz.com/edit/finitelooper-ng16-lbwia9?file=src%2Fapp%2Fapp.component.html

[Priyanka Karthikeyan]

Hi Ciprian-Catalin,

Thank you for providing the sample. If you'd like the textbox border color to be red from the start, you can use the styles below to resolve the issue.

.ng-invalid .e-outline.e-float-input {

  border-right-color: red !important;

  border-left-color: red !important;

  border-bottom-color: red !important;

}

.ng-invalid label.e-float-text::before,

.ng-invalid label .e-float-text-content,

.ng-invalid label.e-float-text::after {

  border-top-color: red !important;

  color: red !important;

}

Sample: https://stackblitz.com/edit/finitelooper-ng16-dp4z2w?file=src%2Fglobal_styles.css,src%2Fapp%2Fapp.component.html

Regards,

Priyanka K

[Ciprian-Catalin]

Now the border of the textbox becomes red at the start, but if I add a new textbox in the form, which is not required, I put a value in the first textbox and then I remove the value, both of the textboxes have border red, the validation doesn't work separately. Also the red border appears from the start for both of the textboxes, even though the second textbox is not required. I've changed the stackblitz with these changes:

https://stackblitz.com/edit/finitelooper-ng16-fbnq37?file=src%2Fapp%2Fapp.component.html

[Priyanka Karthikeyan]

Hi Ciprian-Catalin,

 

To apply custom styles to a specific textbox, you can utilize the cssClass property in your code. Below is a code snippet and a sample to guide you through the process:

 

app.component.html

<ejs-textbox

     ....

      cssClass="e-outline e-small e-custom"

    >

    </ejs-textbox>

 

global_styles.css

 .ng-invalid .e-custom.e-outline.e-float-input {

  border-right-color: red !important;

  border-left-color: red !important;

  border-bottom-color: red !important;

}

.ng-invalid .e-custom label.e-float-text::before,

.ng-invalid .e-custom label .e-float-text-content,

.ng-invalid .e-custom label.e-float-text::after {

  border-top-color: red !important;

  color: red !important;

}

 

Sample:https://stackblitz.com/edit/finitelooper-ng16-iyeax5?file=src%2Fapp%2Fapp.component.html,src%2Fglobal_styles.css

 

API Reference:https://ej2.syncfusion.com/angular/documentation/api/textbox/#cssclass

 

Regards,

Priyanka K

[Ciprian-Catalin]

Hi,

what i want to achieve is to have an red border only for those fields that are required and doesn't have any value inserted. I have added e-custom cssClass but now appear red border for all fields that have that class, even if those fields have value by default. 

My sample:  https://stackblitz.com/edit/finitelooper-ng16-qdk655?file=src%2Fapp%2Fapp.component.ts

For example in my sample Ndg1 have by default this value: "test" but have red border and shouldn't. Seem, if at least one field is invalid because doesn't have any value, all the fields that have custom css, appear with red border.

Thank you

[Priyanka Karthikeyan]

Hi Ciprian-Catalin,

 

We apologies for any inconvenience caused. To address the issue, please use the following styles. These styles will apply a red border only when validation fails; otherwise, a red border will not be added to the textbox:

 

 

 .ng-invalid .ng-invalid .e-custom.e-outline.e-float-input {

  border-right-color: red !important;

  border-left-color: red !important;

  border-bottom-color: red !important;

}

.ng-invalid .ng-invalid .e-custom label.e-float-text::before,

.ng-invalid .ng-invalid .e-custom label .e-float-text-content,

.ng-invalid .ng-invalid .e-custom label.e-float-text::after {

  border-top-color: red !important;

  color: red !important;

}

 

Sample: https://stackblitz.com/edit/finitelooper-ng16-smp8l4

 

Regards,

Priyanka K

[Ciprian-Catalin]

Hello, I changed the example from the stackblitz for the case when there is a control that is not part of a reactive form, and the required validation is set using a custom method by ngClass:

https://stackblitz.com/edit/finitelooper-ng16-nutanz?file=src%2Fapp%2Fapp.component.ts

 but it looks like the provided custom css is working only for the case when the control is placed in a reactive form, is there a way to update it to add the red border also for the standalone textbox?

[Priyanka Karthikeyan]

Hi Ciprian-Catalin,

 

You can modify the styles to add a red border to the standalone textbox by following the below CSS rules. Here's an updated version of the CSS:

 

 

.required .e-custom.e-outline.e-float-input {

  border-right-color: red !important;

  border-left-color: red !important;

  border-bottom-color: red !important;

}

.required .e-custom label.e-float-text::before,

.required .e-custom label .e-float-text-content,

.required .e-custom label.e-float-text::after {

  border-top-color: red !important;

  color: red !important;

}

 

Sample: https://stackblitz.com/edit/finitelooper-ng16-kuytyl?file=src%2Fapp%2Fapp.component.html,src%2Fglobal_styles.css

 

Regards,

Priyanka K