[英]CloneNode if all the fields input is filled in still cloning when fields are not filled in
如果未填写所有字段输入和选定框,我希望我的按钮不要克隆我的字段。
HTML
<fieldset id="schedule-items">
<legend>Horários disponíveis
<button type="button" id="add-time" onclick="addButton()">+Novo horário</button>
</legend>
<div class="schedule-item">
<div class="select-block">
<label for="weekday">Dia da semana</label>
<select name="weekday[]" required="true">
<option id="select" value="select" selected>Selecione uma opção</option>
{%for weekday in weekdays %}
<option value="{{loop.index0}}">{{weekday}}</option>
{%endfor%}
</select>
</div>
<div class="input-block">
<label for="time_from">Das</label>
<input type="time" name="time_from[]" required>
</div>
<div class="input-block">
<label for="time_to">Ate</label>
<input type="time" name="time_to[]" required>
</div>
</div>
</fieldset>
</form>
JS
function cloneField(){
const newFieldContainer = document.querySelector(".schedule-item").cloneNode(true)
let fields = newFieldContainer.querySelectorAll('input')
fields.forEach(function(field){
field.value = ""
})
document.querySelector("#schedule-items").appendChild(newFieldContainer)
}
function addButton(){
const selected = document.getElementById('select').selected
console.log(selected)
const scheduleItems = document.querySelector('#schedule-items')
console.log(scheduleItems)
let inputs = scheduleItems.querySelectorAll('input')
inputs.forEach(function(input){
if(selected == true || input.value == ""){
alert('Please select a day and time of the week')
}else{
let button = document.querySelector("#add-time")
button.addEventListener('click',cloneField)
}
})
}
目前,当我第一次尝试单击按钮时,它会向我发出警报消息,但一旦克隆了第二个字段克隆,即使我需要填写所有字段输入并进行特定选择。
您可以使用Array#some
遍历所有元素并检查是否有任何元素未填充,而不是像当前那样仅检查第一个元素。
if(!selected || [...inputs].some(input=>input.value==='')){
alert('Please select a day and time of the week')
} else {
let button = document.querySelector("#add-time")
button.addEventListener('click',cloneField)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.