jQuery check if 4 fields are filled in

Question

I am working on a form with 4 fields which I directly validate. So if a field is filled in correctly I give this field green borders for example. But now I want to do a check if all the fields are filled in and then I show a message.

My idea is to first make a function for each field like this below. And then check the 4 functions if they return true. But that didn't work, so I first check a single function (in this example for the field 'width') if they match, an alert returns. But this also doesn't work, so I cannot go any further now.

Can anybody help me to make this function work first?

(The #config-steps #width is an input field with the an id 'width')

My code snippet:

 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

Use $('#width').change for checking

$('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;

  }
});

Updated here:

 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

You will need to call the

check_field();

Function after each input has been updated. I've created an example of how you can achieve this.

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

Answer 3

You can use .each() function in jQuery to test several elements at once:

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>