JSFiddle - React, Tailwind, and code Playground

by Nataliia Vernyhora

HTML

<form id="dataFieldMapping">
    <input class="nat_qru" type="text"/> <br><br>
    
    <input type="checkbox" class="wcv-disable-national-input " style="" name="_wcv_shipping_fee_national_free" id="_wcv_shipping_fee_national_free"><label for="_wcv_shipping_fee_national_free">Free national shipping.</label><br><br>
    
    <input type="checkbox" class="wcv-disable-national-input " style="" name="_wcv_shipping_fee_national_free" id="_wcv_shipping_fee_national_charge"><label for="_wcv_shipping_fee_national_free">Charge for national shipping.</label><br><br>
    
    <hr>
    <input class="qru" type="text"/> <br><br>
    <input type="checkbox" class="wcv-disable-international-input " style="" name="_wcv_shipping_fee_national_free" id="_wcv_shipping_fee_international_free"><label for="_wcv_shipping_fee_national_free">Free INTERnational shipping.</label><br><br>
    
    <input type="checkbox" class="wcv-disable-international-input " style="" name="_wcv_shipping_fee_national_free" id="_wcv_shipping_fee_international_charge"><label for="_wcv_shipping_fee_national_free">Charge for INTERnational shipping.</label><br><br>
    
    <button class="submit_btn" type="submit">BTN</button>
</form>

CSS

.left-bg {
    background:red
}

JavaScript

$('#dataFieldMapping .submit_btn').click(function() {
var $nonempty = $('.nat_qru').filter(function(e) {
    return this.value != ''
  });
var nat_checked = $(".wcv-disable-national-input:checked" ).length > 0;

var $internonempty = $('.internat_qru').filter(function(e) {
    return this.value != ''
  });
var inter_checked = $(".wcv-disable-international-input:checked" ).length > 0

if ( ($nonempty.length == 0 && !nat_checked) && ($internonempty.length == 0 && !inter_checked)) {
    alert('All fields are not filled');
    e.preventDefault();
  }
  else if ($nonempty.length == 0 && !nat_checked) {
    alert('National fields are not filled');
    e.preventDefault();
  }
 else if ($internonempty.length == 0 && !inter_checked) {
    alert('International fields are not filled');
    e.preventDefault();
  }
})