Обязательная форма поля с помощью атрибута id в Javascript

#javascript #jquery #required-field

Вопрос:

вот моя анкета. Когда пользователь хочет добавить другую форму, он просто нажимает «тамба бил».

моя проблема заключается в том, что функция required просто определяет имя входного файла. Я хочу, чтобы функция required определялась по идентификатору поля ввода, потому что оно имеет одно и то же имя в одной форме.

  <fieldset>
   <div id="item">
     <div class="callout callout-warning" style="margin-top:15px">
       <div class="row">
         <div class="col-md-12">
           <h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b>
           <span class="float-sm-right">
           <button type="button" name="add" id="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i>amp;nbsp;Tambah Bil</button>
           </span></h6><hr>
        </div>
       </div>

        <div class="row">
         <div class="col-md-12">
          <div class="form-group">
                    <label>Jabatan</label>
                    <input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>">
                    <span class="form-control form-control-sm"><?php echo $jab; ?></span>
            </div>
           </div>
         </div>
        
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    <label>Kod*</label>
                    <select class="form-control select2bs4" name="kod[]" id= "kod" required>
                    <option value="" disabled="disabled" selected="selected">--Pilih Kod--</option>?php foreach($kod as $k):?>
                    <option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option>
                    <?php endforeach;?>
                    </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                    <label>Perkara (Wajid isi ruangan pertama)*</label>
                    <input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1" required>
                    <input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2" required="false" style="margin-top:6px !important" >
                    <input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3" required="false" style="margin-top:6px !important" >
                    </div>
                </div>
            </div>
                                    
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    <label>No. Rujukan*</label>
                    <input id="noruj" type="text" class="form-control form-control-sm" name="noruj[]" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Jumlah (RM)* </label>
                        <input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]" required>
                    </div>
                </div>
                </div>
                <span>*Ruangan wajib diisi</span>
            </div>
            </div>
         </fieldset>
 

вот моя форма на javascript, когда пользователь хочет добавить еще один билл.

         $('html, body').animate({scrollTop: ' =550px'}, 400);

        var html = '';
        html  = '<div class="callout callout-warning">';
        html  = '<div class="row"><div class="col-md-12"><h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b><span class="float-sm-right" style="padding-left:5px"><button type="button" name="remove" class="btn btn-block btn-danger btn-sm right remove"><i class="fa fa-minus"></i>amp;nbsp;Padam Bil</button></span><span class="float-sm-right"><button type="button" name="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i>amp;nbsp;Tambah Bil</button></span></h6><hr></div></div>';
        html  = '<div class="row"><div class="col-md-12"><div class="form-group"><label>Jabatan*</label><input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>"><span class="form-control form-control-sm"><?php echo $jab; ?></span></div></div></div>';
        
        html  = '<div class="row"><div class="col-md-6">';
        //html  = '<div class="form-group"><label>Kategori*</label><select name="kategori' i '[]" class="form-control select2bs4" style="width: 100%;" required><option value="" disabled="disabled" selected="selected">--Pilih Kategori--</option><option value="INDIVIDU">Individu</option><option value="SYARIKAT">Syarikat</option></select></div>';
        html  = '<div class="form-group"><label>Kod*</label><select class="form-control select2bs4" name="kod[]" id ="kod' i '" required><option value="" disabled="disabled" selected="selected">--Pilih Kod--</option><?php foreach($kod as $k):?><option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option><?php endforeach;?></select></div>';
        html  = '</div><div class="col-md-6">';
        html  = '<div class="form-group"><label>Perkara (Wajib isi ruangan pertama)*</label><input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1' i '" required><input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2' i '" style="margin-top:6px !important" ><input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3' i '" style="margin-top:6px !important" ></div>';
        html  = '</div></div>';
        
        html  = '<div class="row"><div class="col-md-6">';
        html  = '<div class="form-group"><label>No. Rujukan*</label><input id="noruj' i '" type="text" class="form-control form-control-sm" name="noruj[]" required></div>';
        html  = '</div><div class="col-md-6">';
        html  = '<div class="form-group"><label>Jumlah (RM)*</label><input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]"  required></div>';
        html  = '</div><span>*Ruangan wajib diisi</span></div>';
        html  = '</div>';
        
        $('#item').append(html);

        $(function()
        {
               const inputs = $("input").prop('required',true);
               console.log('return value:');
               inputs.each(log);
               
               console.log('');
               console.log('selector:');
               $("input[required]").each(log);
               
               function log(index, element) 
               {
                 console.log($(element).attr("id"));
               }
        });
 

поле, необходимое для кодирования, просто считывает поле ввода за пределами javascript…
как я хочу определить, требуется ли ввод в форме javascript с помощью атрибута id??
требуемая функция не может определить идентификатор поля ввода, функция определяет имя поля ввода, потому что в одной форме есть одно и то же имя поля ввода.
кто-нибудь может мне помочь??
Заранее спасибо.

введите описание изображения здесь
введите описание изображения здесь

Ответ №1:

Вы можете использовать его сразу же после установки опоры

 const inputs = $("input").prop('required',true);
console.log(inputs);
 

Вы также можете использовать селектор атрибутов

 const inputs = $("input[required]");
 
         const i = 1;
        $('html, body').animate({scrollTop: ' =550px'}, 400);

        var html = '';
        html  = '<div class="callout callout-warning">';
        html  = '<div class="row"><div class="col-md-12"><h6><i class="far fa-file-alt"style="font-size:20px"></i><b style="padding-left:7px">Maklumat Bil</b><span class="float-sm-right" style="padding-left:5px"><button type="button" name="remove" class="btn btn-block btn-danger btn-sm right remove"><i class="fa fa-minus"></i>amp;nbsp;Padam Bil</button></span><span class="float-sm-right"><button type="button" name="add" class="btn btn-block btn-primary btn-sm right add"><i class="fa fa-plus"></i>amp;nbsp;Tambah Bil</button></span></h6><hr></div></div>';
        html  = '<div class="row"><div class="col-md-12"><div class="form-group"><label>Jabatan*</label><input type="hidden" name="jabatan[]" class="form-control" value="<?php echo $dept; ?>"><span class="form-control form-control-sm"><?php echo $jab; ?></span></div></div></div>';
        
        html  = '<div class="row"><div class="col-md-6">';
        //html  = '<div class="form-group"><label>Kategori*</label><select name="kategori' i '[]" class="form-control select2bs4" style="width: 100%;" required><option value="" disabled="disabled" selected="selected">--Pilih Kategori--</option><option value="INDIVIDU">Individu</option><option value="SYARIKAT">Syarikat</option></select></div>';
        html  = '<div class="form-group"><label>Kod*</label><select class="form-control select2bs4" name="kod[]" id ="kod' i '" required><option value="" disabled="disabled" selected="selected">--Pilih Kod--</option><?php foreach($kod as $k):?><option value="<?php echo $k->kod;?>"><?php echo $k->kod;?> - <?php echo $k->keterangan;?></option><?php endforeach;?></select></div>';
        html  = '</div><div class="col-md-6">';
        html  = '<div class="form-group"><label>Perkara (Wajib isi ruangan pertama)*</label><input type="text" class="form-control form-control-sm" name="perkara1[]" id="perkara1' i '" required><input type="text" class="form-control form-control-sm" name="perkara2[]" id="perkara2' i '" style="margin-top:6px !important" ><input type="text" class="form-control form-control-sm" name="perkara3[]" id="perkara3' i '" style="margin-top:6px !important" ></div>';
        html  = '</div></div>';
        
        html  = '<div class="row"><div class="col-md-6">';
        html  = '<div class="form-group"><label>No. Rujukan*</label><input id="noruj' i '" type="text" class="form-control form-control-sm" name="noruj[]" required></div>';
        html  = '</div><div class="col-md-6">';
        html  = '<div class="form-group"><label>Jumlah (RM)*</label><input type="text" id="currency" class="form-control form-control-sm currency" name="jumlah[]"  required></div>';
        html  = '</div><span>*Ruangan wajib diisi</span></div>';
        html  = '</div>';
        
        $('#item').append(html);

      $(function()
        {
               const inputs = $("input").prop('required',true);
               console.log('return value:');
               inputs.each(log);
               
               console.log('');
               console.log('selector:');
               $("input[required]").each(log);
               
               function log(index, element) {
                 console.log($(element).attr('name'));
               }
        }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item"></div> 

Комментарии:

1. я попробовал ваш код, но он все еще не может прочитать ввод внутри javascript . например :

2. Я не могу понять вашу проблему. Я добавил фрагмент, пожалуйста, попробуйте.

3. извините, я не упомянул, что хочу определить требуемое поле ввода по идентификатору поля ввода, а не по имени поля ввода.. это связано с тем, что имя ввода было использовано в другом поле ввода в той же форме. Заранее спасибо

4. В моем ответе не выполняется обнаружение поля имени, я только вывожу поле имени. Ваш вопрос состоит в том, чтобы получить поле ввода с required атрибутом. На него уже дан ответ. Элементы передаются в переменную, вы можете делать все, что угодно.