使所有輸入字段時，沒有一個至少填充在

我不是用JavaScript不夠好接壤紅色。簡單地說，我有一個輸入字段的表單。用戶必須至少填寫其中一個。我已經找到了正確的代碼來做到這一點。此代碼告訴用戶使用警報消息時出現錯誤。但我想使用相同的代碼將所有輸入字段邊框設爲紅色而不是此警報消息。使所有輸入字段時，沒有一個至少填充在

HTML

<form id="myform" action="" method="post"> 
    <input name="destination" class="form-control" type="text" > 
    <input name="thingstodo" class="form-control" type="text"> 
    <input name="gsearch" class="form-control" type="text"> 
    <button type="submit" name="search">Search</button> 
</form>

的JavaScript

$(function(){ 
    $("#myform").submit(function(){ 

    var valid=0; 
    $(this).find('input[type=text]').each(function(){ 
     if($(this).val() != "") valid+=1; 
    }); 

    if(valid){ 
     return true; 
    } 
    else { 
     alert("error: you must fill in at least one field"); 
     return false; 
    } 
    }); 
});

感謝

來源

2017-04-02 Mido

這是一個簡單的變化，但我想指出，突出紅色的各個領域 - 從UX的角度表示所有字段是必需的，而不是隻有一個。我會重新考慮這個用戶界面。 – Yoda

您可以通過設置CSS樣式來完成。這是用jQuery語法最容易完成的。

$(function(){ 
    $("#myform").submit(function(){ 

    var valid = 0; 
    $(this).find('input[type=text]').each(function(){ 
     if($(this).val() != "") { 
     valid++; 
     $(this).css("border-color", "initial"); 
     } 
     else { 
     $(this).css("border-color", "red"); 
     } 
    }); 

    if (valid > 0) { return true; } 
    else { return false; } 
    }); 
});

來源

2017-04-02 20:45:55 ADyson

此代碼仍存在問題。即使填補了一個領域。該行動沒有進行 – Mido

抱歉，我不知道您的意思是「行動沒有進行」。下面是我發佈的代碼的工作示例：https://jsfiddle.net/q5xub1Le/顯然，當你與所有有效的字段提交，什麼都不會發生，因爲在這一例子中，沒有服務器端代碼。但它向您顯示驗證會捕獲空白字段並以紅色突出顯示它們。 – ADyson

我沒有填寫三個字段，需要填補一個字段就足夠了，在這裏，我將無法在搜索按鈕按下，直到我填寫所有領域。 – Mido

修改，像這樣

$(function(){ 
$("#myform").submit(function(){ 

var valid=0; 
$(this).find('input[type=text]').each(function(){ 

    if($(this).val() != "") valid+=1; 
else 
$(this).style.border = "solid 1px red" 
}); 

if(valid){ 
    return true; 
} 
else { 
    return false; 
} 
}); 
});

代碼

來源

2017-04-02 20:44:34 lhavCoder

這實際上並不提供用戶指定的行爲，而不是突出顯示錶單元素突出顯示的每個字段。 – Yoda

這是@Yoda。如何分別突出顯示每個字段而不是突出顯示整個表單元素？ – Mido

你是對的。我只是相應地修改它。試試這個出 – lhavCoder

這個怎麼樣？

$(function(){ 
 
    $("#myform").submit(function(){ 
 
    var dirty = false; 
 
    $('input[type=text]').each(function(){ 
 
     if($(this).val().length){ 
 
      dirty = true; 
 
     } 
 
    }); 
 
    if(!dirty){ 
 
     $('input[type=text]').each(function(){ 
 
     $(this).css('border','1px solid red'); 
 
     }); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myform" action="" method="post"> 
 
    <input name="destination" class="form-control" type="text" > 
 
    <input name="thingstodo" class="form-control" type="text"> 
 
    <input name="gsearch" class="form-control" type="text"> 
 
    <button type="submit" name="search">Search</button> 
 
</form>

來源

2017-04-02 20:50:30 JustCauseWhat

使所有輸入字段時，沒有一個至少填充在

回答

相關問題