驗證輸入文本框與圖像

我有13個輸入文本框只是爲了收集用戶的信息。我試圖添加一些邏輯，當用戶單擊下一個按鈕時，檢查輸入字段是否爲空，如果是這樣，請在文本框之後放置X圖像。如果我將文本放在框中，那麼它不會將框勾出紅色，但仍然會在表單後放置X.驗證輸入文本框與圖像

我使用$。每（）和$ .filter（）

這裏試過是JS：

var invalid = '<img src="css/Filtration/img/x.png" /> '; 
$('.btn').click(function() { 
    var inputs = $(":input").filter(function() { 
    return this.value === ""; 
    }); 

    if (inputs.length) { 
     $(inputs).css('border-color', 'red').after(invalid); 
     console.log(inputs.length); 
      } 
});

下面是一些輸入文本框還不是全部：

<label>First Name:</label> 
<input type="text" name="First Name" class="txtbox" id="firstName" /> 
<label>Last Name:</label> 
<input type="text" name="Last Name" class="txtbox" id="lastName" /> 
<label>Email Address:</label> 
<input type="text" name="Email Address" class="txtbox" id="email" /> 
<label>Company:</label> 
<input type="text" name="Company" class="txtbox" id="company" />

來源

2015-06-23 Troy Bryant

您可以發佈完整的HTML表單？ – deFreitas

試試這個：

var invalid = '<img src="css/Filtration/img/x.png" /> '; 
$('.btn').click(function() { 

    $(":input").each(function() { 
     if($(this).val() == ''){ 

      $(this).css({borderColor: 'red'}).after(invalid); 
     } 
    }); 
});

ñ注意，如果您之前沒有設置其他邊框CSS參數，color可能無法正常工作。因此，這種模式可以在這種情況下，照顧它：

.css({border: '1px solid red'})

現在，:input有點廣泛，因此效率低下。因此，它能夠更好地說：

$(':text', '#container').each(...

其中#container，當然，所有的輸入容器。

來源

2015-06-23 17:49:26

仍然產生相同的結果。想知道如何去除邊框顏色，但仍然在文本框後放置「X」。 –

好的。你的意思是邊框顏色不適用，但img是？如果是這樣，那麼嘗試我編輯的當前'{}'風格。 –

如果上面的'.css（）'不起作用，那麼肯定會被其他一些樣式聲明覆蓋。它可能有助於檢查瀏覽器控制檯中的文本框。就在我頭頂上，用「red！important」代替「red」來檢查。 –

請考慮使用jQuery驗證，你可以看到的例子here和文檔here

來源

2015-06-23 17:50:15 deFreitas

該頁面設置爲包含表單中的表單。這是我第一次選擇使用驗證 –

窗體內的表單不是有效的html。瀏覽器渲染引擎將破壞該結構。 – dhh

對不起@TroyBryant，哪個頁面設置爲包含表單中的表單？ – deFreitas

驗證輸入文本框與圖像

回答

相關問題