I have the following which has input fields and a select tag. the required attribute works well with my type="number" however with my select tag the required attribute is not working?

<select class="js-select2-custom custom-select myClass" name="Description" size="1" id="@("txtDescription" i)" @required
    data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load" }'>
    <option label="empty"></option>
    <option value="Boxes" selected>Boxes</option>
    <option value="Envelop">Envelop</option>
    <option value="Pallet">Pallet</option>
    </select>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You use the @required attribute. That's something different then required.

<select class="js-select2-custom custom-select myClass" name="Description" size="1" id="@("txtDescription" i)" @required
    data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load" }'>
    <option label="empty"></option>
    <option value="Boxes" selected>Boxes</option>
    <option value="Envelop">Envelop</option>
    <option value="Pallet">Pallet</option>
</select>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Change the @required to required.

Basically remove the @ since required is part of a normal html element and the @ is causing the function to not be called

Your code would then look like this:

<select class="js-select2-custom custom-select myClass" name="Description" size="1" id="@("txtDescription" i)" required
    data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load" }'>
    <option label="empty"></option>
    <option value="Boxes" selected>Boxes</option>
    <option value="Envelop">Envelop</option>
    <option value="Pallet">Pallet</option>
    </select>