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>