1
我的目標：我有一個包含切換按鈕和「其他」輸入字段的頁面。用戶必須選擇其中一個選項。如果沒有選擇選項，則只會顯示一條驗證消息（消息：「請選擇一個」）。如果用戶選擇切換按鈕，則驗證消息將消失。但是，如果用戶在輸入字段中輸入了錯誤的文本，那麼只會爲該特定輸入字段顯示驗證（消息：請輸入數字）。驗證必須是切換或輸入字段
我的問題：當我選擇提交按鈕，這兩個驗證消息顯示在同一時間，當我只想要一個確認消息，同時顯示。標題爲「其他」的輸入字段應僅在輸入字段中輸入錯誤時才顯示其驗證消息。有人如何我可以顯示驗證信息一次？我研究但找不到答案。如果你有來源，隨時提供任何。如果我得到負面評價，請告訴我爲什麼我可以改進我的問題。謝謝！
我試過的：我用if語句來隱藏輸入驗證消息，如果輸入文本沒有（onkeyup）。否則在輸入中輸入文本時顯示輸入驗證。它不適合我。
$(document).ready(function() {
\t /*----------------------VALIDATING----------------------*/
$('.btnNext').click(function(e) {
function validateNumber(number) {
var numberPattern = /[^A-Za-z]/;
return numberPattern.test(number);
}
var focusSet = false;
//SELECT FRUIT BUTTON
if (!$('.toggle_monthly_button').hasClass('selected')) {
if ($(".toggle_list_monthly").parent().next(".Inval").length == 0) {
$(".toggle_list_monthly").parent().after("<div class='Inval spacing'>Please select one</div>");
$(".selected").parent().next(".Inval").remove();
}
} else {
$('.Inval').remove();
}
//OTHER - REMOVES VALUE IF SELECTING OTHER INPUT FIELD
if (!$('#input_total_monthly').val()) {
if ($("#input_total_monthly").parent().next(".Inval").length == 0) {
}
if (!validateNumber($('#phonePanelTwo').val())) {
}
//e.preventDefault();
$('#input_total_monthly').focus();
focusSet = true;
} else {
//ok
$('.Inval').remove();
}
//NUMBER
if (!$('#input_total_monthly').val()) {
//if not valid
if ($('#input_total_monthly').parent().next('.Inval').length == 0) {
$("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please enter number</div>");
}
} else {
//ok
$("#input_total_monthly").parent().next(".Inval").remove();
}
if (!validateNumber($('#input_total_monthly').val())) {
if ($('#input_total_monthly').parent().next('.Inval').length == 0) {
$("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please fix number format</div>");
}
}
}); /*----------------------END OF VALIDATING----------------------*/
/*Toggle donation button*/
$('.toggle').on('click', function() {
$('.toggle').removeClass('selected');
$('.toggle').attr('aria-pressed', false);
$(this).addClass('selected');
$(this).attr('aria-pressed', $(this).attr('aria-pressed') == 'false' ? 'true' : 'false');
});
/*Deselects the BUTTONS when selecting "Other" */
$("#input_total_monthly").click(function() {
$(".js-tabs").find(".selected").removeClass('selected');
$(".js-tabs").find('.toggle').attr('aria-pressed', false);
});
// Bind keyup event on the input
$('#input_total_monthly').focus(function() {
// If value is not empty
if ($('#input_total_monthly').val().length < 0) {
// Hide the element
$(".toggle_list").removeAttr('id', 'id-select_monthly_amnt');
} else {
// Otherwise show it
$(".toggle_list").attr('id', 'id-select_monthly_amnt');
}
}).keyup(); // Trigger the keyup event, thus running the handler on page load
});.input_container_content{
float:right; \t
}
.Inval {
color:red !important;
}
.Input_Msg{
margin-top:-24px !important;
margin-left:10px !important;
position:absolute;
}
.Input_two_Msg{
position: absolute;
margin-top: 17px;
}
.toggle_size {
padding: 17px 44px;
width: 6.5em;
text-align:center;
display:inline-block;
text-align:center;
margin:1px 1px;
cursor:pointer;
border: 3px solid black;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<table class="toggle_list_monthly" role="presentation">
<tr>
<th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">1</button></th>
<th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">2</button></th>
<th><button class="toggle toggle_size toggle_monthly_button" aria-pressed="false">3</button></th>
</tr>
</table>
<table class="input_container_content">
<tr>
<th>
<form>
<fieldset>
<label class="control-label">Other</label>
<input name="total" id="input_total_monthly" />
</fieldset>
</form>
</th>
</tr>
</table>
</div>
<button value="" class="btnNext">Submit</button>
</body>
</html>