如何仅在使用javascript / jquery的其他输入不为空的情况下才添加必填属性？

Question

我在表单中有一个列表，因此在每个列表项中都有2个输入。

我希望在提交表单时，如果我在同一列表上的2个输入之一不为空，则应同时满足它们（必需属性），但是如果在其他列表项上2个输入为空，则将其作为他们是。

这是仅一个列表项的示例：

<form class="settings-form quick-reports">
    <ul class="report-list">
        <li class="report-list-li"> 
            <span class="report-num">Report 01</span> 
            <div class="settings-name-fields">
                <label for="website-name1" class="report-name">Name</label>
                <input class="website-input" type="text" id="website-name1">
            </div>
            <div class="settings-url-fields">
                <label for="website-url1" class="report-url">URL</label>
                <input class="url-input" type="url">
            </div>
        </li>
    </ul>
</form>

想过类似的事情：

$('#submit').click(function(e){
if($(input1).val() !== ""){
    $('input1').prop('required', true);
    $('input2').prop('required', true);
}
});

但是我不知道如何做到这一点并使它适合我列表中的每个列表项

我的整个小提琴在这里

Answer 1

这应该可以满足您的需求：

使用.each()循环：

$('#submit').click(function(e){
    // remove required property in case that some fields were modified before click
    $('.report-list input').prop('required', false).each(function(){
        !$(this).val() || $(this).closest('li').find('input').prop('required', true);
    });
});

JSFiddle演示

---

或.filter() ：

$('#submit').click(function(e){
    $('.report-list input').prop('required', false).filter(function(){
        return $(this).val();
    }).closest('li').find('input').prop('required', true);
});

JSFiddle演示

Answer 2

我建议不要使用此处required的属性，首先，此属性不适用于所有浏览器（例如，IE只会忽略它），其次，可能是在提交时设置它为时已晚。

我会用这样的东西：

if($(input1).val() == "" && $(input2).val()==""){
    //handle case and show error message
    alert("Either input one or input2 needs a value");
    e.preventDefault();
    return false; //make sure the form is not submitted
}