JSFiddle - React, Tailwind, and code Playground

by Vetrivel Samidurai

HTML

<form id="searchForm" action="/pages/index" accept-charset="UTF-8" method="get">
   <input id="toValidate" type="text" name="search_form[mixed]">
   <input id="toValidate" type="text" name="search_form[first_name]">
   <select name="search_form[state]">
      <option selected="selected" value="All">All</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="WY">Wyoming</option>
   </select>
   <input type="submit"  name="commit" value="SEARCH" id="submit" data-disable-with="SEARCH123">
</form>

JavaScript

function checkFields(form) {
    var inputs = form.find('toValidate').not('[type="submit"],[type="button"],[type="reset"]'); 

    var filled = inputs.filter(function(){
        return $.trim($(this).val()).length > 0;
    });
    
    if(filled.length === 0) {
        return false;
    }
    
    return true;
}

$(function(){
    $('#searchForm').on('submit',function(e){
        var oneFilled = checkFields($(this));
        if (oneFilled) {
            alert('At least ONE field filled!');
        } else {    
            e.preventDefault();
            if (confirm('NO FIELDS FILLED OUT!')){
                $('#submit').disabled = false;
            }else{
                $('#submit').disabled = false;
            }
        }
    });
});