У меня есть скрипт, который показывает некоторые и скрывает некоторые HTML, но я не знаю, как добавить обязательный тег, когда он отображается, я уже пытался добавить атрибут в раздел, который я хочу, но он требует его, даже когда не отображается. .. Кто-нибудь может мне помочь. заранее спасибо!
<div class="start"><select name="start" class="form-control">
<option value="0" class="select">Select City</option>
<?php foreach($rows as $row): ?>
<option <? echo 'value="'.$row['id'].'"';
echo ($row['id'] == $job['start'])?' selected>':'>';
echo $row['name']; ?></option>
<?php endforeach; ?>
</select></div><br />
<br />
<script>
$('select[name=start]').change(function () {
if ($(this).val() == '89') {
$('#otherStart').show();
} else {
$('#otherStart').hide();
}
});
</script>
<br />
<div id="otherStart">
<input type="text" name="otherStart" placeholder="Other City" <? echo ($job['otherStart'])?' value="'.$job['otherStart'].'"':'';
?> class="form-control" >
</div>
Прежде всего, вам нужно назначить id
— атрибут для ввода, который вы модифицируете, чтобы мы могли изменить атрибуты с помощью jQuery. Вы уже используете <div id="otherStart">
чтобы показать / скрыть весь div, поэтому выберите другое имя, например id="inputOtherStart"
(Идентификаторы всегда должны быть уникальными).
Затем мы используем jQuery для добавления и удаления атрибута, когда мы показываем и скрываем div
соответственно.
<script>
$(function() {
// Function to show/hide the extra subject-field, and making it required or not
var Start = '#Start';
var otherStart = '#otherStart';
var otherStartInput = '#otherStartInput';
$(otherStart).hide();
$(Start).change(function(){
if($(Start).val() == 89) {
$(otherStart).show();
$(otherStartInput).prop('required',true);
} else {
$(otherStart).hide();
$(otherStartInput).prop('required',false);
}
});
});
</script>
<br />
<div id="otherStart">
<input type="text" id="otherStartInput" name="otherStart" placeholder="Other City" <? echo ($job['otherStart'])?' value="'.$job['otherStart'].'"':''; ?> class="form-control" />
</div>
Чтобы сделать определенный элемент обязательным в jQuery, вы должны использовать .prop
:
$(selector).prop("required", true);
Вы также можете сделать это в JavaScript, используя атрибут required
:
element.required = true;
Или опять
element.setAttribute("required","");
Чтобы добавить и удалить атрибут «требуется», когда div показывает и скрывает, вы можете изменить свой JavaScript как
<script>
$('select[name=start]').change(function () {
if ($(this).val() == '89') {
$('#otherStart').show();
$('#otherStart : input').attr('required');
} else {
$('#otherStart').hide();
$('#otherStart : input').removeAttr('required');
}
});
</script>