我的目标：我有一个包含切换按钮和“其他”输入字段的页面。用户必须选择其中一个选项。如果未选择选项，则只会显示一条验证消息（消息：“请选择一个”）。如果用户选择切换按钮，则验证消息将消失。但是，如果用户在输入字段中输入了错误的文本，则只会针对该特定输入字段显示验证（消息：请输入数字）。
我的问题：当我选择提交按钮时，两个验证消息同时显示，此时我只希望一次显示一条验证消息。标题为“其他”的输入字段只应在输入字段中键入错误时显示其验证消息。有谁可以如何一次显示验证消息？我研究但找不到答案。如果您有消息来源，请随时提供。如果我得到负分，请告诉我为什么这样我可以改进我的问题。谢谢！
我尝试了什么：我使用了一个if语句，如果没有输入文本（onkeyup），它会隐藏输入验证消息。如果在输入中输入文本，则Else显示输入验证。它对我不起作用。
$(document).ready(function() {
/*----------------------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;
}
.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>
答案 0 :(得分：0)
更新了您的代码。
$(document).ready(function () {
var focusSet = false;
/*----------------------VALIDATING----------------------*/
$('.btnNext').click(function (e) {
function validateNumber(number) {
var numberPattern = /[^A-Za-z]/;
return numberPattern.test(number);
}
$('.Inval').remove(); //clear any errors
//If focus is set only fire input text validation.
if (focusSet) {
//Fire validations for input text
//OTHER - REMOVES VALUE IF SELECTING OTHER INPUT FIELD
if (!validateNumber($('#phonePanelTwo').val())) {
if ($('#input_total_monthly').parent().next('.Inval').length == 0) {
$("#input_total_monthly").parent().after("<div class='Inval Input_two_Msg'>Please enter valid number</div>");
}
}
$('#input_total_monthly').focus();
//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>");
}
}
} else {
//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();
}
}
}
}); /*----------------------END OF VALIDATING----------------------*/
/*Toggle donation button*/
$('.toggle').on('click', function () {
focusSet = false;
$('.toggle').removeClass('selected');
$('.toggle').attr('aria-pressed', false);
$(this).addClass('selected');
$(this).attr('aria-pressed', $(this).attr('aria-pressed') == 'false' ? 'true' : 'false');
$('#input_total_monthly').val('');
});
/*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 () {
focusSet = true;
// 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;
}
.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>