Re-enable submit after preventDefault

Question

I have the following html form:

<form id="searchForm" action="/pages/index" accept-charset="UTF-8" method="get">
   <input id="toValidate" type="text" name="search_form[mixed]"></div>
   <input id="toValidate" type="text" name="search_form[first_name]"></div>
   <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="SEARCH">
</form>

I want to make the user enter at least one input field. They way I thought to do that is with the following Javascript code:

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;
            }
        }
    });
});

The preventDefault() function disables the submit button but then I cannot re-enable the button again once I alerted the user. It's funny though, because when I paste the code $('#submit').disabled = false; on the console it re-enables the button. What should I do to re-enable the button within the JS code then?

From the eyes of a user:

When preventDefault(); it's called the button is disabled and then, once the user accepts the confirmation window she cannot submit the form again because the button is disabled. How can I make it so that the button becomes enabled once again after the confirmation window is accepted and the user can click on the 'SEARCH' button.

Thank you.

Answer 1

There are a couple of problems with your code:

• You don't need to disable the submit button at all. e.preventDefault() disables the form's submission, so when the fields are not filled, call it, and when they are filled, don't call it.
• Both your input fields have id="toValidate" and in the checkFields function, you're finding the input fields by form.find('toValidate') which is incorrect. You need to make the classes of those input fields toValidate, not their IDs, because IDs of two or more elements can not be the same.
• The selector form.find('toValidate') actually will work with neither ID nor class, because it's looking for elements with the tag <toValidate>. For finding elements with IDs of the text, the selector will be form.find('#toValidate') and for finding elements with classes of the text, it will be form.find('.toValidate'). We're going to use the latter in the code below.
• More a bad practice than an incorrect one, you are disabling the submit button. Disabling the submit button does not mean that the user can't submit the form. The user can even then submit the form by pressing the enter key.

In the below snippet, when your form is submitted, it checks the fields are filled or not. If they are not filled, it calls e.preventDefault() and if at least one is filled then it doesn't call e.preventDefault(), which will cause the form to submit (and a page reload).

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;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="searchForm" action="/pages/index" accept-charset="UTF-8" method="get">
   <input class="toValidate" type="text" name="search_form[mixed]"></div>
   <input class="toValidate" type="text" name="search_form[first_name]"></div>
   <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="SEARCH" />
</form>

Answer 2

you can use this if you want to destroy your custom submit handler :

$('form').unbind("submit");