2

I have several validation functions that work fine and I want to write an additional validation in simple javascript (no jQuery, etc) for the entire form that disables/enables the Submit button depending on whether the other validation functions return true or false. How do I go about that?

For example, for my main HTML I have:

 <form id="form" method="POST">
      <label class="form">Field 1</label><input type="text" name="input1" onkeyup="validateInput1(); return false">
      <label class="form">Field 2</label><input type="text" name="input2" onkeyup="validateInput2(); return false">
      ...
      <button id="submit" type="submit" value="submit">Submit</button>
 </form>

For my script I have:

 function validateInput1(){
 ...
 }

 function validateInput2(){
 ...
 }

Now I want to write a function with something like:

function validateForm(){

    var submitButton = document.getElementById('submit');
    submitButton.disabled = true;

    /*If all other validation functions like validateInput1() returns true then submitButton.disabled = false*/
}

How do I do this?

5120bee
  • 689
  • 1
  • 14
  • 36
  • Without jQuery, it's going to be a bit of the PITA. You'd have to loop through the input fields, and attach a change handler, then have it check the `validateForm()` function to see if all the forms are valid. After that, if they're all valid, set the submit button to enabled, otherwise set it to disabled. – Blue Aug 07 '16 at 01:40

1 Answers1

5

Start the button off as disabled. Hook to the onchange event for each of the form inputs, and then have it check the validateForm() function to see if all the forms are valid. After that, if they're all valid, set the submit button to enabled, otherwise set it to disabled.

var inputs = document.querySelectorAll('#form input');

var validateInput1 = function()
{
  return document.getElementById('input1').value != '';
}

var validateInput2 = function()
{
  return document.getElementById('input2').value != '';
}
    
var validateForm = function() {

  if ( !validateInput1() ) {
    return false;
  }

  if ( !validateInput2() ) {
    return false;
  }

  return true;
}

for ( var i = 0, len = inputs.length; i < len; i++ )
{
  var checkValid = function() {
    document.getElementById('submit').disabled = !validateForm();
    
    //Is the same as:
    /*if ( !validateForm() )
    {
      document.getElementById('submitButton').disabled = true;
    }
    else
    {
      document.getElementById('submitButton').disabled = false;
    }*/
  }
  
  inputs[i].addEventListener('change', checkValid);
  inputs[i].addEventListener('keyup', checkValid);
}
<form id="form" method="POST" onsubmit="alert('Submitted!'); return false">
    <label class="form">Field 1</label><input type="text" name="input1" id="input1">
    <label class="form">Field 2</label><input type="text" name="input2" id="input2">
    <button id="submit" type="submit" value="submit" disabled="disabled">Submit</button>
</form>
Blue
  • 22,608
  • 7
  • 62
  • 92
  • could you do a fiddle on this? I can't seem to get it to work. – 5120bee Aug 07 '16 at 02:07
  • I'm having a hard time since what you coded is so different from my initial question. I had the onkeyup="validateOption1(); return false" on mine but you took it out in your code and it's messing up my script. Also, I don't have any return statements for my validation functions since I want them to be ambiguous functions. – 5120bee Aug 07 '16 at 05:42
  • Well then, you have to clarify exactly what you're looking for. – Blue Aug 07 '16 at 05:43