jQuery 检查是否填写了 4 个字段

Question

我正在处理一个包含 4 个字段的表单，我直接对其进行验证。 因此，如果一个字段填写正确，我会给这个字段添加绿色边框。 但是现在我想检查是否所有字段都已填写，然后显示一条消息。

我的想法是首先为每个字段创建一个函数，如下所示。 然后检查 4 个函数是否返回 true。 但这不起作用，所以我首先检查单个函数（在本例中为字段“宽度”），如果它们匹配，则会返回警报。 但这也不起作用，所以我现在不能再进一步了。

有人可以帮我先让这个功能工作吗？

（ #config-steps #width是一个带有 id 'width' 的输入字段）

我的代码片段：

 jQuery(document).ready(function($) { // Validate text fields $("#config-steps #width, #config-steps #height").on('input', function() { var input = $(this); var width = input.val(); if (width.match(/^\\d+$/)) { input.removeClass('invalid').addClass('valid'); input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step'); } else { input.removeClass('valid').addClass('invalid'); input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step'); } }); // Validate select box $("#config-steps #type").change(function() { var slct = $(this); var type = slct.val() if (type) { slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step'); } else { slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step'); } }); // Check all fields filled in. function check_field() { function validate_width() { var width = $("#config-steps #width").val(); if (width.match(/^\\d+$/)) { alert('test'); } else { return false; } } } });

 .valid { background: #f7fff7 !important; border: 1px solid #459b40 !important; } .invalid { background: #fff7f7 !important; border: 1px solid #ff0000 !important; } .clear { clear: both; } #config-steps li:nth-child(odd) { background: #f6f8f9; } #config-steps li { border-bottom: 1px solid #e1e6ea; padding: 20px; list-style: none; } #config-steps li .step-number { color: #FFF; font-size: 16px; display: inline-block; background: #f08f02; border: 1px solid #d98c1a; padding: 8px 11px; font-weight: bold; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; float: left; min-width: 8px; text-align: center; margin: 0 15px 0 0; -moz-box-shadow: inset 0px 0 1px #FFF; -webkit-box-shadow: inset 0px 0 1px #FFF; box-shadow: inset 0px 0 1px #FFF; } #config-steps li .valid-step { background: #55ad50; border: 1px solid #2b8825; } #config-steps li .unvalid-step { background: #ed7171; border: 1px solid #cf0000; } #config-steps li .step-description { font-size: 14px; float: left; padding: 10px 0 0 0; } #config-steps li .step-action { float: right; } #config-steps li .step-action .textfield { background: #f1f9ff; border: 1px solid #9eabb6; padding: 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #config-steps li .step-action input[type="text"] { width: 180px; text-align: right; } #config-steps li .step-action input[type="text"]:focus { background: #fffcf6; border: 1px solid #f6a41d; } #config-steps li .step-action select { margin: 7px 3px 0 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" id="config"> <ul id="config-steps"> <li> <span class="step-number">1</span> <p class="step-description">Width (mm)</p> <div class="step-action"> <input autofocus type="text" class="textfield" id="width" /> </div> <!--End step-action--> <div class="clear"></div> </li> <li> <span class="step-number">2</span> <p class="step-description">Height (mm)</p> <div class="step-action"> <input type="text" class="textfield" id="height" /> </div> <!--End step-action--> <div class="clear"></div> </li> <li> <span class="step-number">3</span> <p class="step-description">Glasstype (mm)</p> <div class="step-action"> <select id="type"> <option value="">-- Select glasstype --</option> <option value="1">Mat</option> <option value="2">Glossy</option> </select> </div> <!--End step-action--> <div class="clear"></div> </li> </ul> <!--End config-steps--> </form> <!--End config-->

Answer 1

使用$('#width').change进行检查

$('input,select').change(function(){
var width = $("#config-steps #width").val();
var height = $("#config-steps #height").val();
var size = $("#config-steps select").val();

    if (width.match(/^\d+$/)&&height.match(/^\d+$/)&&size.match(/^\d+$/)) {
        alert('Well done!');
    } else {
        return false;

  }
});

在这里更新：

 jQuery(document).ready(function($) { // Validate text fields $("#config-steps #width, #config-steps #height").on('input', function() { var input = $(this); var width = input.val(); if (width.match(/^\\d+$/)) { input.removeClass('invalid').addClass('valid'); input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step'); } else { input.removeClass('valid').addClass('invalid'); input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step'); } }); // Validate select box $("#config-steps #type").change(function() { var slct = $(this); var type = slct.val() if (type) { slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step'); } else { slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step'); } }); // Check all fields filled in. $('input,select').change(function() { var width = $("#config-steps #width").val(); var height = $("#config-steps #height").val(); var size = $("#config-steps select").val(); if (width.match(/^\\d+$/) && height.match(/^\\d+$/) && size.match(/^\\d+$/)) { alert('Well done!'); } else { return false; } }); });

 .valid { background: #f7fff7 !important; border: 1px solid #459b40 !important; } .invalid { background: #fff7f7 !important; border: 1px solid #ff0000 !important; } .clear { clear: both; } #config-steps li:nth-child(odd) { background: #f6f8f9; } #config-steps li { border-bottom: 1px solid #e1e6ea; padding: 20px; list-style: none; } #config-steps li .step-number { color: #FFF; font-size: 16px; display: inline-block; background: #f08f02; border: 1px solid #d98c1a; padding: 8px 11px; font-weight: bold; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; float: left; min-width: 8px; text-align: center; margin: 0 15px 0 0; -moz-box-shadow: inset 0px 0 1px #FFF; -webkit-box-shadow: inset 0px 0 1px #FFF; box-shadow: inset 0px 0 1px #FFF; } #config-steps li .valid-step { background: #55ad50; border: 1px solid #2b8825; } #config-steps li .unvalid-step { background: #ed7171; border: 1px solid #cf0000; } #config-steps li .step-description { font-size: 14px; float: left; padding: 10px 0 0 0; } #config-steps li .step-action { float: right; } #config-steps li .step-action .textfield { background: #f1f9ff; border: 1px solid #9eabb6; padding: 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #config-steps li .step-action input[type="text"] { width: 180px; text-align: right; } #config-steps li .step-action input[type="text"]:focus { background: #fffcf6; border: 1px solid #f6a41d; } #config-steps li .step-action select { margin: 7px 3px 0 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" id="config"> <ul id="config-steps"> <li> <span class="step-number">1</span> <p class="step-description">Width (mm)</p> <div class="step-action"> <input autofocus type="text" class="textfield" id="width" /> </div> <!--End step-action--> <div class="clear"></div> </li> <li> <span class="step-number">2</span> <p class="step-description">Height (mm)</p> <div class="step-action"> <input type="text" class="textfield" id="height" /> </div> <!--End step-action--> <div class="clear"></div> </li> <li> <span class="step-number">3</span> <p class="step-description">Glasstype (mm)</p> <div class="step-action"> <select id="type"> <option value="">-- Select glasstype --</option> <option value="1">Mat</option> <option value="2">Glossy</option> </select> </div> <!--End step-action--> <div class="clear"></div> </li> </ul> <!--End config-steps--> </form> <!--End config-->

Answer 2

您需要致电

check_field();

每个输入更新后的函数。 我已经创建了一个示例来说明如何实现这一点。

http://jsfiddle.net/EsBTg/6/

Answer 3

您可以在 jQuery 中使用.each()函数一次测试多个元素：

function validate_width() {
    var error = 0;
    $("#width, #height, #type").each(function () {
        if (!$(this).val().match(/^\d+$/)) {
            error++;
        }
    });
    if (!error){
        alert("Everything's fine!");
    }    
}

 jQuery(document).ready(function($) { // Validate text fields $("#config-steps #width, #config-steps #height").on('input', function() { var input = $(this); var width = input.val(); if (width.match(/^\\d+$/)) { input.removeClass('invalid').addClass('valid'); input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step'); } else { input.removeClass('valid').addClass('invalid'); input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step'); } }); // Validate select box $("#config-steps #type").change(function() { var slct = $(this); var type = slct.val() if (type) { slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step'); } else { slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step'); } }); // Check all fields filled in. function validate_width() { var error = 0; $("#width, #height, #type").each(function() { if (!$(this).val().match(/^\\d+$/)) { error++; } }); if (error) { alert("There were " + error + " errors."); } else { alert("Everything's fine!"); } } $("#check").click(function() { validate_width(); }) });

 .valid { background: #f7fff7 !important; border: 1px solid #459b40 !important; } .invalid { background: #fff7f7 !important; border: 1px solid #ff0000 !important; } .clear { clear: both; } #config-steps li:nth-child(odd) { background: #f6f8f9; } #config-steps li { border-bottom: 1px solid #e1e6ea; padding: 20px; list-style: none; } #config-steps li .step-number { color: #FFF; font-size: 16px; display: inline-block; background: #f08f02; border: 1px solid #d98c1a; padding: 8px 11px; font-weight: bold; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; float: left; min-width: 8px; text-align: center; margin: 0 15px 0 0; -moz-box-shadow: inset 0px 0 1px #FFF; -webkit-box-shadow: inset 0px 0 1px #FFF; box-shadow: inset 0px 0 1px #FFF; } #config-steps li .valid-step { background: #55ad50; border: 1px solid #2b8825; } #config-steps li .unvalid-step { background: #ed7171; border: 1px solid #cf0000; } #config-steps li .step-description { font-size: 14px; float: left; padding: 10px 0 0 0; } #config-steps li .step-action { float: right; } #config-steps li .step-action .textfield { background: #f1f9ff; border: 1px solid #9eabb6; padding: 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #config-steps li .step-action input[type="text"] { width: 180px; text-align: right; } #config-steps li .step-action input[type="text"]:focus { background: #fffcf6; border: 1px solid #f6a41d; } #config-steps li .step-action select { margin: 7px 3px 0 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" id="config"> <ul id="config-steps"> <li> <span class="step-number">1</span> <p class="step-description">Width (mm)</p> <div class="step-action"> <input autofocus type="text" class="textfield" id="width" /> </div> <!--End step-action--> <div class="clear"></div> </li> <li> <span class="step-number">2</span> <p class="step-description">Height (mm)</p> <div class="step-action"> <input type="text" class="textfield" id="height" /> </div> <!--End step-action--> <div class="clear"></div> </li> <li> <span class="step-number">3</span> <p class="step-description">Glasstype (mm)</p> <div class="step-action"> <select id="type"> <option value="">-- Select glasstype --</option> <option value="1">Mat</option> <option value="2">Glossy</option> </select> </div> <!--End step-action--> <div class="clear"></div> </li> </ul> <!--End config-steps--> </form> <!--End config--> <input id=check value=Check type=button>