Значение загружается в FireBase, даже если условие не выполняется

Question

В этом коде я хочу, чтобы значение не загружалось в базу данных firebase, когда условие

хотя бы 1 число, хотя бы одно строчное значение и минимум 4 символа должны быть включены

даже если условие не заполнено, значения загружаются в базу данных

var myInput = document.getElementById("user_name2");
var letter = document.getElementById("letter");

var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box

myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }



  // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if(myInput.value.length >= 4) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

var tblUsers = document.getElementById('tbl_users_list');
var databaseRef = firebase.database().ref('users/');
var rowIndex = 1;
var uid;
var childKey;
var childData;
  
  databaseRef.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
    childSnapshot.key;
    childSnapshot.val();
   
   var row = tblUsers.insertRow(rowIndex);
   var cellId = row.insertCell(0);
   var cellName = row.insertCell(1);
   cellId.appendChild(document.createTextNode(childKey));
   cellName.appendChild(document.createTextNode(childData.user_name));
   cellName.appendChild(document.createTextNode(childData.user_name2));
   
   rowIndex = rowIndex + 1;
    });
  });

   
  function save_user(){
   var user_name = document.getElementById('user_name').value;
   var user_name2 = document.getElementById('user_name2').value;
  
   uid = firebase.database().ref().child('users').push().key;
   
   var data = {
    user_id: uid,
    user_name: user_name,
    password: user_name2
   }
   
   var updates = {};
   updates['/users/' + uid] = data;
   firebase.database().ref().update(updates);
   
   alert('The user is created successfully!');
   reload_page();
   
   document.writeln(uid);
   
   
  }
  
  function update_user(){
   var user_name = document.getElementById('user_name').value;
   var user_id = document.getElementById('user_id').value;

   var data = {
    user_id: user_id,
    user_name: user_name
   }
   
   var updates = {};
   updates['/users/' + user_id] = data;
   firebase.database().ref().update(updates);
   
   alert('The user is updated successfully!');
   
   reload_page();
  }
  
  function delete_user(){
    var password = ""; // hard-coded value, but this could also be read from the HTML

var ref = firebase.database().ref("users");
var  query = ref.orderByChild("password").equalTo(password);

query.once("value").then(function(results) {
  results.forEach(function(snapshot) {
    snapshot.ref.remove();

    alert('record removed');
  })
})

}
  
  function reload_page(){
   window.location.reload();
  }
ref.on("child_added", function(snapshot, prevChildKey) {
  var newPost = snapshot.val();
  console.log("Author: " + newPost.author);
  console.log("Title: " + newPost.title);
  console.log("Previous Post ID: " + prevChildKey);
});

.valid {
  color: green;
}
/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#grad {
  background-image: linear-gradient(to top right, #33ccff 10%, #ff99cc 100%);
}

<input type="text" id="user_name2" style="height:75px;font-size:14pt;" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
<div id="message">
<h3>Unique ID must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>

<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>4 characters</b></p>

<input type="button" class="button"  value="Save" onclick="save_user();" autocomplete="on" />

Я использовал CSS для изменения условий при каждом их выполнении

Answer 1

Ваш код, как написано, всегда будет сохранять пользователя в базе данных. Когда пользователь нажимает кнопку «Сохранить», вызывается функция save_user(). И нет логического пути через save_user(), который бы не приводил к сохранению нового пользователя - вы не проверяете ввод пользователя перед его сохранением.

Похоже, вы делаете много полезного ввода проверка во время ввода пользователем (ваш код обработчика keyup), но ничто не удерживает пользователя от нажатия кнопки «Сохранить» и нажатия кнопки «Сохранить», что неизменно сохраняет нового пользователя.

Надеюсь, это поможет.