How to disable form if value exists in input field using jquery?

Question

My question is I am checking input field value from database, if found then form should not submit. But in my case if 3 input fields are there one says already exists and other is normal value. Form gets submitted. How can i prevent form submission based on no error found on any input field.

public function check_module($postdata)
{
    $module_name = $postdata['module_name'];
    $data['select'] = ['*'];
    $data['table'] = MODULE;
    $data['where'] = ['module_name' => $module_name, 'status !=' => '9'];
    $res = $this->selectRecords($data);

    if ($res != null) {
        $response = 0;
    } else {
        $response = 1;
    }
    echo $response;
    exit;
}

$(document).on('change', '.module_name', function () {
        var that = $(this);
        var module_name = $(this).val();
        var error = 0;
        var base_url = $('#base_url').val();

        $.ajax({
            url: base_url + 'module/check_module',
            type: 'post',
            data: {
                module_name: module_name
            },
            success: function (res) {
                if (res == 0) {
                    that.next('span').html('Module already exist');
                    $('#submit').attr('disabled', 'disabled');
                } else {
                    $('.text-danger').each(function () {
                        var value = $(this).html();
                        if (value != "") {
                            error++;
                        }
                    });

                    if (error == 1) {
                        $('#submit').removeAttr("disabled");
                    }
                    that.next('span').html('');
                }
            }
        });
    });

Answer 1

You could use a global variable which is modified with each ajax call. If the ajax response is zero add one into the global errors variable or 0 if all is OK.

To calculate if the array contains a mix of 1 & 0's there are a number of ways you could do that but a Set seems quite concise and can be combined with an array.reduce call to calculate the sum of all elements in the array. If the sum is zero the form can be submitted.

let errors=[];
let col=document.querySelectorAll('input[name="module_name"]');

$( document ).on('change', '.module_name', function(){
    var that = $(this);
    var module_name = $(this).val();
    var base_url = $('#base_url').val();

    $.ajax({
        url: base_url + 'module/check_module',
        type: 'post',
        data: {
            module_name: module_name
        },
        success: function( res ) {
            if( res==0 ) {
                that.next('span').html('Module already exist');
                $('#submit').attr('disabled', 'disabled' );
            }
            errors.push( res==0 );  // add either 1 or 0 depending upon result 

            if(
                // 3 elements?
                errors.length == col.length 
                    &&
                // all the same number?
                new Set( errors ).size==1 
                    &&
                // sum equals zero
                errors.reduce( (a,b)=>a+b )==0 
            )$('#submit').removeAttr("disabled");
        }
    });
});