#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
атрибутом. На него уже дан ответ. Элементы передаются в переменную, вы можете делать все, что угодно.