验证必须为切换或输入字段
[英]Validation must be toggle or input field
问题描述
我的目标：我有一个包含切换按钮和“其他”输入字段的页面。 用户必须选择选项之一。 如果未选择选项，则将仅显示一条验证消息（消息：“请选择一个”）。 如果用户选择切换按钮，则验证消息将消失。 但是，如果用户在输入字段中输入了错误的文本，则仅会对该特定输入字段显示验证（消息：说请输入数字）。
我的问题 ： 当我只希望一次显示一条验证消息时，当我选择“提交”按钮时，两条验证消息会同时显示 。 仅在输入字段中键入错误时，标题为“其他”的输入字段才应显示其验证消息。 有谁可以一次显示一次验证消息？ 我正在研究，但找不到答案。 如果您有资源，请随时提供。 如果我得到了负面评价，请告诉我原因，以便我改善自己的问题。 谢谢！
我尝试过的操作：我使用了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>
1 个解决方案
解决方案1
0 已采纳 2017-10-18 04:40:19
更新了您的代码。
$(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>
切换输入字段
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.