How can i make a dropDownList required ?

[Sandra Bordier]

Dear Support,

I have a form with several dropdownlist. I tried to add the "required"default rules, but it does not work.

For instance, this one (a simple input) works perfectly : 

<ejs-textbox

required

floatLabelType="Auto"

placeholder="Titre *"

v-model="form.name"

>

When this field is empty and that I try to submit the form, it shows a message for me to fill the field.

however, for this one : 

<ejs-dropdownlist

required

id='dropdownlistHorse'

floatLabelType="Auto"

:dataSource='getHorsesList()'

:fields='fields'

placeholder='Cheval concerné *'

v-model="form.horse_id"

></ejs-dropdownlist>

Require does not work. When I submit the form with that field without any value selected, the form doesn't show any message and the form is submitted.

How does the "require" default rule works with a dropdownlist ?

Thank you for your help

[Sevvandhi Nagulan]

Hi Sandra, 

Greetings from Syncfusion support. 

We checked your query. The “An invalid form control with name='' is not focusable. error is thrown in Chrome”  when a form with a Dropdownlist in it is submitted. The browser throws such an error when an input with validation attributes is hidden from the user and the user attempts to submit its form. To resolve reported issue, we request that you to use the form validator for validation. Refer the following sample. 

Sample link: https://codesandbox.io/s/form-validation-forked-2263r?file=/src/App.vue 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N        

[Sandra Bordier]

Thank you very much for your answer, but it doesnt work exactly.

First of all, when I load the form, it already show an error, whereas I haven't press the submit button yet :

Then, when I press "Ajouter", it show several times "The field is required":




This is not accurate enough.

1/ First, I would like the message to appears just below the field which is concerned,and not beyond the button.
2/ The, instead of "the field", I would like to see for intances " The name is required" => customize the error message.
3/ Then, is it possible to translate in French?

Ps : my form is contained in a modal.

Thank you in advance :)

My code is in the zip file.

[Sandra Bordier]

Here is the zip file

Attachment: code_840748f2.zip

[Sevvandhi Nagulan]

Hi Sandra, 

We checked your query. We are currently validating the reported requirement at our end. We will update further details on or before 8th of July,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Sevvandhi Nagulan]

Hi Sandra, 

Thanks for your patience. 

We checked your queries. We would like to let you that form validation will not work if you perform some kind of operation in the component such as form submit or leaving the field as empty. So reported issue not replicated at our end when preparing the sample using the code example shared. We also prepared the sample for requested requirement. Please find the details below. 

Query 1: First, I would like the message to appears just below the field which is concerned,and not beyond the button. 

It can be achieved by maintain the sperate error element for each component. Refer the below code. 

  <div class="error-element"> 

          <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12" form-group> 

            <ejs-textbox 

              id="name" 

              required 

              floatLabelType="Auto" 

              placeholder="Titre *" 

              v-model="form.name" 

            /> 

          </div> 

        </div> 

        <div class="error-element"> 

          <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12" form-group> 

            <ejs-dropdownlist 

              id="dropdownHorse" 

              floatLabelType="Auto" 

              :dataSource="getHorsesList()" 

              :fields="fields" 

              placeholder="Cheval concerné *" 

              v-model="form.horse_id" 

            /> 

          </div> 

        </div>   

 

       customPlacement: function (inputelement, errorElement) { 

          var parentElement = inputelement.closest(".error-element"); 

          parentElement.appendChild(errorElement); 

        }, 

 

Query 2: The, instead of "the field", I would like to see for intances " The name is required" => customize the error message.  

If you want to customize the error element based on the field name, then pass the custom error message when adding the rules. Refer the below code. 

 options: { 

          name: { 

            required: [true, "The name is required"], 

          }, 

          dropdownHorse: { 

            required: [true, "The dropdownHorse is required"], 

          }, 

        }, 

        locale: "fr", 

      }, 

Query 3: Then, is it possible to translate in French? 

 

 

We can translate the error messages to French culture by localizing the text to corresponding culture. Refer the below code. 

L10n.load({ 

  fr: { 

    formValidator: { 

      required: "Ce champ est requis.", 

    }, 

  }, 

}); 

options: { 

        customPlacement: function (inputelement, errorElement) { 

          var parentElement = inputelement.closest(".error-element"); 

          parentElement.appendChild(errorElement); 

        }, 

        rules: { 

          name: { 

            required: true, 

          }, 

          dropdownHorse: { 

            required: true, 

          }, 

        }, 

        locale: "fr", 

      }, 

    }; 

Please find the modified sample below. 

Sample link: https://codesandbox.io/s/form-validation-forked-qjdiw?file=/src/App.vue:3863-4263 

Ej2-locale link: https://github.com/syncfusion/ej2-locale/blob/master/src/fr.json 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Sandra Bordier]

Thank you very much, it works perfectly :) 

[Sevvandhi Nagulan]

Hi Sandra, 

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N