How to validate length and match required character?

I want to hide the submit button if value does not match the required type, I m able to hide it on the length, but my match does not work.

JavaScript Code

function submitChangej(){

var inputlastName = document.getElementById("lastname"); 
var inputfirstName = document.getElementById("firstname"); 
var inputmobileNumber = document.getElementById("mobilenumber");
var inputidNumber = document.getElementById("idnumber");
var firstname =  /^[a-zA-Z-\s]{2,128}$/; 
var lastname = /^[a-zA-Z-\s]{2,128}$/; 
var mobilenumber = /^[0-9]{10,20}$/;
var idnumber = /^([0-9]){2}([0-1][0-9])([0-3][0-9])([0-9]){4}([0-1])([0-9]){2}?$/;

var inputSubmit = document.getElementById("apply");

var Container = document.getElementById('Agreement');

if((inputfirstName.value.length < 2 || inputfirstName.value.length > 128 ) || ( inputlastName.value.length < 2 || inputlastName > 128 ) || (inputmobileNumber.value.length < 10 || inputmobileNumber > 20) || (inputidNumber.value.length < 13)){


        Container.style.display = 'none';
  }
  else{

        Container.style.display = 'block';
  }
  var Container = document.getElementById('Agreement');
 if((firstname.match(firstname) != null) || (lastname.match(lastname) != null) || (mobilenumber.match(mobilenumber) != null) || (idnumber.match(idnumber) != null)){

        Container.style.display = 'none';
  }
  else{

        Container.style.display = 'block';

  } 
}

HTML CODE

<form >

<label for="firstname"><span class="starRequired"><b>*</b>&nbsp;</span>First name:</label><br> 
<input  type="text" name="firstname" id="firstname"  required  autofocus="autofocus" pattern="[a-zA-Z-\s]{3,128}"  onkeyup="submitChangej();"  onkeypress="checkFirstname(this.value);" value="">

<br/><label for="lastname"><span class="starRequired"><b>*</b>&nbsp;</span>Last name:</label><br>
<input type="text" name="lastname" required id="lastname"  pattern="[a-zA-Z-\s]{3,128}"  onkeyup="submitChangej();" onkeypress="checkLastname(this.value);" 
        onblur="checkLastname(this.value);" value="">  

<br/><label for="mobilenumber"><span class="starRequired"><b>*</b>&nbsp;</span>Mobile Number:</label><br/>              
<input type="text" name="mobilenumber" required  id="mobilenumber" onkeyup="submitChangej();" onkeypress="checkMobilenumber(this.value);"
        onblur="checkMobilenumber(this.value);"  value="">

<br/><label for="idnumber">ID Number:</label><br/>  
<input type="text" name="idnumber" id="idnumber" maxlength="13" onkeyup="submitChangej();" onkeypress="checkIdnumber(this.value);" 
        onblur="checkIdnumber(this.value);" value="">

<div id="Agreement" style="display:none">               
<input type="submit" id="apply" name="apply"  value="Apply"  
onclick="if(!this.form.terms.checked){alert('Please indicate that you accept the Agreement');return false}"/>

<input type="checkbox" id="terms" name="terms" >    
<label id="accept" >I accept the Agreement</label>
<textarea  name="textfield" id="textfield"  rows="10" cols="105" readonly="readonly" >      
     1. Acceptance
     1.1 I have read and accepted the above terms and conditions.
        </textarea>
        </span>
      </div>

    </form>

I than call my method submitChangej()on the fields that i validate.

The button should be hidden when match and length are invalid, if everything is correct than the button should appear. The length work good, but the match of required characters does not match