How to validate blan value based on conditions

[KINS]

I have an 10 field in model class and I have set required field ( mandatory  field ) for all validation.

I have used syncfusion control to bind this model.

The validation is working fine as per our requirement using Data Annotation 

I would like to know below clarification for validation 

I have 10 fields in model class,and I have stored this field in separate table with three login field

For example 

Login1

Login2

Login3

Login1:-

Login1 should validate field1 to field4 

Login2:-

Login2 should validate field3 to field6

Login3:-

Login3 should validate field7 to field10

[Muthukumar Kannan]

Hi KINS, 

Thanks for contacting Syncfusion support.  

We have validated your query for “validate single model properties in different pages” at our end. According to that, we can able to achieve your requirement with using Syncfusion components. However, we have added the sample for that and attached below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SplitValidationBlazor-292941609 

Could you please check whether your requirement is addressed or not with the above sample? 

Please let us know if we have misunderstood your query. 

Regards, 

Muthukumar K 

[KINS]

Thanks for effort..

The above code is not related to our requirement. 

Please see my actual requirement with example.

In above example code , you have created three razor file (login1,login2,login3) and single model class.

But my requirement is single razor file (customer.razor) and single model class with login wise validation 

For example :-

In customer.razor file

For login1,email ID is required but phone no is not required 

For login2,email ID is not required but phone no is required 

For login3, both are required

For login4,both are not required 

Note:-

I have maintained (required or not required ) for each field in separate table.

I would like to validate required field based on this condition 

Hope it's clear...

[Joshna Lingala Uthama Reddy Lingala]

Hi KINS, 

Thanks for your shared information. 

We have validated your reported query “validate single model properties in different pages” with your shared information at our end. We would like to let you know that the requirement can be achieved by overriding IsValid method for custom attribute. We have prepared a sample for your reference in which we have validated the Field1 to success only when the value is User1. Similarly, you can also override IsValid based on you condition to validate only if specific user is logged in. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/167434/ze/SplitValidationBlazor-1999728846 

    public class LoginAttribute : ValidationAttribute 

    { 

        public string ValidValue { get; set; } 

        protected override ValidationResult IsValid(object value, ValidationContext validationContext) 

        { 

            var lowerValue = value?.ToString().ToLower(); 

            if (!string.IsNullOrEmpty(lowerValue) && lowerValue.Equals(ValidValue.ToLower()))  

                return null; 

            return new ValidationResult(ErrorMessage, new[] { validationContext.MemberName }); 

        } 

    } 

    public class FormData 

    { 

        [LoginAttribute(ErrorMessage ="Enter valid message", ValidValue = "User1")] 

        public string Field1 { get; set; } 

Please try the above sample and get back to us if you need further assistance. 

Regards, 

Joshna L 

[KINS]

Thanks for reply 

Is it possible to visible synfussion control true or false based on above scenario 

[Joshna Lingala Uthama Reddy Lingala]

Hi KINS, 

Thanks for your update 

We have validated your query for “ possibility of syncfusion controls visibility” at our end. We want to let you know that the requirement can be achieved by adding if condition for the required controls. We have prepared a sample for your reference in which we have added condition for Field2 using value of Field1 i.e., if Field1 value is proper then Field2 is visible in UI. Similarly, you can add you own conditioning for your required fields. 

Sample: https://www.syncfusion.com/downloads/support/forum/167434/ze/SplitValidationBlazor393179531 

 

            <div> 

                <label for="Name" style="padding: 20px 0 5px 0">Field1</label> 

                <SfTextBox id='textbox' @bind-Value="@model.Field1" Placeholder="Enter a Field1"></SfTextBox> 

                <ValidationMessage For="@(() => model.Field1)" /> 

            </div> 

            @if(model.Field1 != null && model.Field1 == "User1") 

             { 

                <div> 

                    <label for="Name" style="padding: 20px 0 5px 0">Field2</label> 

                    <SfTextBox id='textbox' @bind-Value="@model.Field2" Placeholder="Enter a Field2"></SfTextBox> 

                    <ValidationMessage For="@(() => model.Field2)" /> 

                </div> 

             } 

 

Also, you can disable the textbox control using Enabled property, please refer to the following UG. 

UG: https://blazor.syncfusion.com/documentation/textbox/how-to/set-the-disabled-state/ 

Please try the above sample and get back to us if you need further assistance. 

Regards, 

Joshna L 

[KINS]

I have one more clarification 

How can  I add css class for required field (* which should be in red color) as per above code.

[Joshna Lingala Uthama Reddy Lingala]

Hi KINS, 

Thanks for your update. 

We have validated your query “adding Css to add * for required fields” at our end. We let you know that your requirement can be achieved by adding a class in label tag and simple css to that class. We have prepared a sample for your reference in which we have added Css to display * in red color for required fields, which can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/167434/ze/SplitValidationBlazor-814154115 

<div> 

    <label for="Name" style="padding: 20px 0 5px 0" class="required">Field3</label> 

    <SfTextBox id='textbox' @bind-Value="@model.Field3" Placeholder="Enter a Field3"></SfTextBox> 

    <ValidationMessage For="@(() => model.Field3)" /> 

</div> 

 

<div> 

    <label for="Name" style="padding: 20px 0 5px 0" class="required">Field4</label> 

    <SfTextBox id='textbox' @bind-Value="@model.Field4" Placeholder="Enter a Field3"></SfTextBox> 

    <ValidationMessage For="@(() => model.Field4)" /> 

</div> 

 

<style> 

  .required:after { 

    content:"*"; 

    color: red; 

  } 

</style> 

 

Please get back to us if you need further assistance. 

Regards, 

Joshna L 

[KINS]

sorry for late reply...

I need to display above css in placeholder

Attachment: Untitled_e6b3fddd.zip

[KINS]

pls help

[Nevitha Ravi]

Hi Kins, 

 

Thanks for your update. 

 

It is not feasible to show EditForm validation error details as placeholder or in the placeholder space of Textbox component. By default in our TextBox, success and error class is added on validation. 

 

 

Red border in Field3 denotes validation failure and green border in Field4 denotes validation success. 

 

Regards, 

Nevitha 

[KINS]

Thanks for reply...

Is it possible to change color of placeholder if it is mandatory instead of *.??

[KINS]

Pls help

[Joshna Lingala Uthama Reddy Lingala]

Hi KINS, 

  

Sorry for the delay. 

  

We have validated your query at our end. We let you know that we can modify the placeholder color if the field is required by adding the below CSS style in the application.  

  

<EditForm Model="@model" OnValidSubmit="@OnValidSubmit">  

            <DataAnnotationsValidator />  

            <div>  

                <label for="Name" style="padding: 20px 0 5px 0">Field1</label>  

                <SfTextBox id='textbox' @bind-Value="@model.Field1" Placeholder="Enter a Field1"></SfTextBox>  

                <ValidationMessage For="@(() => model.Field1)" />  

            </div>  

            @if(model.Field1 != null && model.Field1 == "User1")  

             {  

                <div>  

                    <label for="Name" style="padding: 20px 0 5px 0" class="required">Field2</label>  

                    <SfTextBox id='textbox' @bind-Value="@model.Field2" Placeholder="Enter a Field2"></SfTextBox>  

                    <ValidationMessage For="@(() => model.Field2)" />  

                </div>  

             }  

              

             <div>  

                <label for="Name" style="padding: 20px 0 5px 0" class="required">Field3</label>  

                        <SfTextBox id='textbox' @bind-Value="@model.Field3" CssClass="requiredClass" Placeholder="Enter a Field3"></SfTextBox>  

                        <ValidationMessage For="@(() => model.Field3)" />  

            </div>  

            <div>  

                <label for="Name" style="padding: 20px 0 5px 0" class="required">Field4</label>  

                        <SfTextBox id='textbox' @bind-Value="@model.Field4" CssClass="requiredClass" Placeholder="Enter a Field4"></SfTextBox>  

                        <ValidationMessage For="@(() => model.Field4)" />  

            </div>  

            <div class="sfButton">  

                <SfButton type="submit" IsPrimary="true">Submit</SfButton>  

            </div>  

  </EditForm>  

<style>  

    .sfButton {  

        padding-top: 10px;  

        display: flex;  

        justify-content: center;  

    }  

    .required:after {  

    content:"*";  

    color: red;  

  }  

    .requiredClass.e-input-group input.e-input::-webkit-input-placeholder {  

        color: red;  

    }  

</style>  

  

  

  

Kindly try with the above information and get back to us if you have any queries 

  

Regards, 

Joshna L 

[KINS]

I have another clarification.

Can I add "*" required class in "Place Holder" instead of using Label

 <label for="Name" style="padding: 20px 0 5px 0" class="required">Field4</label>  

[Joshna Lingala Uthama Reddy Lingala]

Hi KINS, 

 

Thanks for the update. 

 

We have validated the reported query for “ adding of “*” in the placeholder” at our end. We let you know that you can add “*” (Required) in the placeholder using the following CSS styles 

 

 

@using Syncfusion.Blazor.Inputs 

 

<SfTextBox FloatLabelType="FloatLabelType.Auto" Placeholder="Enter a Field" ></SfTextBox> 

 

<style> 

.e-input-group.e-control-wrapper.e-float-input .e-float-text::after { 

content: "*"; 

color: red; 

} 

</style> 

 

 

Output: 

 

 

Kindly try with the above information and get back to us if you have any queries. 

 

Regards, 

Joshna L