How to use regex to check if an input has whitespace?-CodePudding

I am trying to disable a button if only whitespace is in the input fields using only JavaScript. I have already successfully made it so that the button is disabled when all any of the inputs are empty and want to do the same with whitespace.

I was trying to use the answers in this Stack Overflow question, but the button is still enabling when there are white spaces in the inputs.

This is my JavaScript code that checks the inputs to enable/disable the button:

    const required = document.querySelectorAll('.input');
    for (const i of required){
        i.addEventListener("input", checkSubmit);
    }

    function checkSubmit(){
        let isValid = true;
        for (const i of required){
            str = i.toString().replace(i);
            isValid = isValid && !!i.value && str.replace(/\s/g, '');
        }

        for (const button of quizButton){
            button.disabled = !isValid;
        }
    }

I am not using a form in html because it interferes with my code that runs once the button is pressed. Also, I would like to not completely change my code (because the other parts are working correctly) if possible.

Would using regex work correctly if the input is numbers/symbols and not a string?

CodePudding user response：

Don't use replace, use test() to test if it contains any non-whitespace characters. Or use trim() to remove surrounding spaces and test if the result is empty.

You also need to use .value to get the value of an input. There's no need to call .toString(), since values are always strings. And I don't know what you were thinking when you added .replace(i); replace() requires two arguments.

function checkSubmit() {
  let isValid = true;
  for (const i of required) {
    str = i.value.trim();
    if (!str) {
      isValid = false;
      break;
    }
  }

  for (const button of quizButton) {
    button.disabled = !isValid;
  }
}

There's also no need to keep looping once you've determined that the input is invalid.

CodePudding user response：

something like that ?

const
  myForm    = document.forms['my-form']
, allInputs = Array.from(myForm.querySelectorAll('input'))
  ;
  
myForm.onsubmit = e => e.preventDefault() // desactivate submit. 

myForm.oninput = e =>
  {
  let lengthAll = allInputs.reduce(  
        (tLen,el) => tLen   el.value.replace(/\s/g, '').length, 0) 
  
  myForm.bt_inputs.disabled = !lengthAll
  //       * use name to acces elements             
  }

<form name="my-form">
  <input name="n1" value="" placeholder="input 1"><br>
  <input name="n2" value="" placeholder="input 2"><br>
  <input name="n3" value="" placeholder="input 3"><br>
<br>
  <button name="bt_inputs" disabled>button</button>
</form>

with no form...

const
  allInputs = Array.from(document.querySelectorAll('input'))
, btInputs  = document.querySelector('button[name="bt_inputs"]')
  ;
allInputs.forEach( el => el.oninput = checkInputs4button )
  
function checkInputs4button()
  {
  btInputs.disabled = !allInputs.reduce(  
     (tLen,el) => tLen   el.value.trim().length, 0)
  }

<input name="n1" value="" placeholder="input 1"><br>
<input name="n2" value="" placeholder="input 2"><br>
<input name="n3" value="" placeholder="input 3"><br>
<br>
<button name="bt_inputs" disabled>button</button>