"您如何使用 html input required 屬性來使一組輸入中的一個成為必需的？"

Question

對於以下輸入類型：文本、url、數字、復選框、單選和文件 在一個組中，我想要求在表單提交中至少提供一個。 當其中一個不為空時，是否可以刪除“必需”屬性。 我還想使用“占位符”屬性，而不是將其視為輸入。 （我猜瀏覽器會處理未提交的“占位符”）

<input type="text" name="TextInput1" id="TextInput1" value="" required>
<input type="url" name="urlInput1" id="urlInput1" value="" required>
<input type="number" name="numberInput1" id="numberInput1" value="" required>

這些需要以某種方式分組嗎？ 我需要一個“onchange”處理程序嗎？ 什么是最好的？

Answer 1

使用以下jQuery代碼：

$("input").change(function() {
   $("input").attr("required", false);
});

您可以通過添加類來對其進行自定義，並提供該類而不是“ input”。 而且您也可以進行自己的驗證，而不使用瀏覽器的驗證。 您可以通過添加到表單來完成

onsubmit="return myValidation()"

您可以嘗試使用驗證庫：
http://parsleyjs.org/
http://verifyjs.com/

Answer 2

我想這就是你想要的嗎？

$("input").change(function()
{
     $("input").removeAttr("required");
     $(this).attr("required","");
});

但這不是一個好方法

Answer 3

你去這里： https : //jsfiddle.net/DIRTY_SMITH/o6vhu9y4/

<input type="text" name="TextInput1" id="TextInput1" placeholder="place holder" value="" required>
<input type="url" name="urlInput1" id="urlInput1" value="" required>
<input type="number" name="numberInput1" id="numberInput1" value="" required>
<input type="submit" onClick="return validate()" />
<script>
    function validate(){
    var text1 = document.getElementById('TextInput1').value;
    var text2 = document.getElementById('urlInput1').value;
    var text3 = document.getElementById('numberInput1').value;
    var cnt = 0;

    if (text1.length > 0 || text2.length > 0 || text3.length > 0){
        alert("working");
        return true;
    }
    alert("please enter something");
    return false;
    }
</script>

Answer 4

工作實例

在處理keyup事件的示例中嘗試此代碼，向示例類group_1每個組添加一個相同的類，並且每次用戶在其中一個輸入中按下某個鍵時，檢查其中一個是否為空，請刪除required屬性：

HTML：

<input class='group_1' type="text" name="TextInput1" id="TextInput1" value="" required>
<input class='group_1' type="url" name="urlInput1" id="urlInput1" value="" required>
<input class='group_1' type="number" name="numberInput1" id="numberInput1" value="" required>

JS：

$('.group_1').keyup(function(){
    var removeRequired = false;

    $('.group_1').each(function(){
         if($(this).val()!="")
             removeRequired = true;
    });

    if(removeRequired)
        $('.group_1').removeAttr('required');
    else
        $('.group_1').attr('required', 'required');
});

希望這可以幫助。

Answer 5

您必須同時觀察所有 Inputs 文本，因此您需要提取所需的屬性。 我有同樣的問題，我做了一個功能：

function inputs_required(vals=null){
    let i=0;
    var input_string ="";
    $.each(vals,function(key,value){
        if(i>0) input_string+=",";
        input_string+="input["+value+"="+key+"]";
        i++;
    });
    var theinputs = $(input_string);
    theinputs.on('input', function () {
        theinputs.not(this).prop('required', !$(this).val().length);
    });
}

let inputsgroup = { "TextInput1": "name","urlInput1": "name","numberInput1": "name" };
inputs_required(inputsgroup);