How to put asterisk dynamically for all fields in form

Question

I would like to ask you how to put asterisk for required fields in form which are different types " input, select, textarea".

I tried almost everything but without good result. Can you suggest me some solution.

My code is:


        <section class="section" id="section-info">
            <div class="add-item__form-data">
                    <div class="add-item__input-wrapper">
                        <input type="text" name="title" value="<?= showValueIfSet('title') ?>" class="add-item__input<?= highlightInputIfEmpty('title_error') ?>" placeholder="Názov (maximálne 60 znakov)" maxlength="60" required>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="category" class="add-item__select<?= highlightInputIfEmpty('category_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Kategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('category', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('category', 'mobil') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <!--predvyplnit kategoriu automaticky-->
                    <div class="add-item__input-wrapper">
                        <select name="subcategory" class="add-item__select <?= highlightInputIfEmpty('subcategory_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Podkategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('subcategory', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('subcategory', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <textarea name="text" class="add-item__textarea<?= highlightInputIfEmpty('text_error') ?>" cols="30" rows="2" placeholder="Text inzerátu (minimálne 20 znakov)" minlength = "20" required><?= showValueIfSet('text') ?></textarea>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="status" class="add-item__select<?= highlightInputIfEmpty('status_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Stav</option>
                            <option value="new"<?= markSelectedAfterResend('status', 'new') ?>>Nový</option>
                            <option value=""<?= markSelectedAfterResend('status', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="price_type" class="add-item__select<?= highlightInputIfEmpty('price_type_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Typ ceny</option>
                            <option value="price"<?= markSelectedAfterResend('price_type', 'price') ?>>Pevná cena</option>
                            <option value=""<?= markSelectedAfterResend('price_type', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <input type="text" id="input-price" name="price" value="<?= showValueIfSet('price') ?>" class="add-item__input<?= highlightInputIfEmpty('price_error') ?>" placeholder="Cena" required><span class="euro-symbol">€</span>
                    </div><?= showErrorMessage('price_int_error') ?>
            </div>
        </section>

And I tried last time this:

::-webkit-input-placeholder:required:after {
   content: '*';
}

::-moz-placeholder:required:after {
   content: '*'; 
}

::-moz-placeholder:required:after {
   content: '*';
}

::-ms-input-placeholder:required:after {  
   content: '*';
}

.add-item__select-main option[value=""][disabled]:after {
    content: '*';   
}

Thank you for advices.

Kurt · Accepted Answer · 2022-10-04T06:27:01.963

Since you can't use pseudo element in input tag, you can use before on your <div> element alternatively.

Note: The flex property is just for center the asterisk sign on div to looks pretty. It's not important for you on this question.

.add-item__input-wrapper {
  display: flex;
  align-items: center;
}

.add-item__input-wrapper::before {
  content: '*';
  color: red;
  margin: 2px;
}

<section class="section" id="section-info">
            <div class="add-item__form-data">
                    <div class="add-item__input-wrapper">
                        <input type="text" name="title" value="<?= showValueIfSet('title') ?>" class="add-item__input<?= highlightInputIfEmpty('title_error') ?>" placeholder="Názov (maximálne 60 znakov)" maxlength="60" required>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="category" class="add-item__select<?= highlightInputIfEmpty('category_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Kategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('category', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('category', 'mobil') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <!--predvyplnit kategoriu automaticky-->
                    <div class="add-item__input-wrapper">
                        <select name="subcategory" class="add-item__select <?= highlightInputIfEmpty('subcategory_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Podkategória</option>
                            <option value="mobil"<?= markSelectedAfterResend('subcategory', 'mobil') ?>>Mobilné telefóny</option>
                            <option value=""<?= markSelectedAfterResend('subcategory', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <textarea name="text" class="add-item__textarea<?= highlightInputIfEmpty('text_error') ?>" cols="30" rows="2" placeholder="Text inzerátu (minimálne 20 znakov)" minlength = "20" required><?= showValueIfSet('text') ?></textarea>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="status" class="add-item__select<?= highlightInputIfEmpty('status_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Stav</option>
                            <option value="new"<?= markSelectedAfterResend('status', 'new') ?>>Nový</option>
                            <option value=""<?= markSelectedAfterResend('status', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <select name="price_type" class="add-item__select<?= highlightInputIfEmpty('price_type_error') ?>" required>
                            <option value="" disabled selected class="add-item__select-main">Typ ceny</option>
                            <option value="price"<?= markSelectedAfterResend('price_type', 'price') ?>>Pevná cena</option>
                            <option value=""<?= markSelectedAfterResend('price_type', 'Samsung') ?>>Nieco ine</option>
                        </select>
                    </div>
                    <div class="add-item__input-wrapper">
                        <input type="text" id="input-price" name="price" value="<?= showValueIfSet('price') ?>" class="add-item__input<?= highlightInputIfEmpty('price_error') ?>" placeholder="Cena" required><span class="euro-symbol">€</span>
                    </div><?= showErrorMessage('price_int_error') ?>
            </div>
        </section>

Here is the reason that you can't use before or after in input tag.

Please let me know if this reached your goal!

How to put asterisk dynamically for all fields in form

1 Answers1