Submitting form even when validation regex is wrong

Question

i am having this problem when i submit the form where both the password and username is wrong. I get an alert box saying that i have enter the wrong details. But when the username is correct and password is validation is wrong it will give me an arlet box by when pressed ok it will submit the form even when i have returned false. Help please much appreciated

<script type="text/javascript">
    function validate(form_id, firstName, password){
        var Reg = /^[A-Za-z0-9_]{1,20}$/;
        var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
        var username = document.forms[form_id].elements[firstName].value;
        var password = document.forms[form_id].elements[password].value;

        if (Reg.test(username) == false) {
            alert('Invalid Username.');
            document.forms[form_id].elements[firstName].focus();
            return false;
        }

        if (Reg1.test(password) == false) {
            alert('Invalid Password.');
            document.forms[form_id].elements[password].focus();
            return false;
        }
    }
</script>

<form id="form_id" action="userlogininput.cgi" onsubmit="javascript:return validate('form_id','firstName','password');"  name="form" method="post">
    Username : <input type="text" id="firstName" name="firstName" class="textboxH-300" required><br>
    Password : <input type="password" id="password" name="password" class="textboxH-300" required><br><br>
    <input id="submitbtn" type="submit" value="Submit"/>
</form>

Answer 1

You can use e.preventDefault() to prevent form sending.

Here is a code example

(function(){    
    function validate(e) {
    	
      e.preventDefault(); // prevent the form sending
      
    
      var Reg = /^[A-Za-z0-9_]{1,20}$/;
      var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
      var username = document.getElementById('firstName');
      var password = document.getElementById('password');

      if (Reg.test(username.value) == false) {
        alert('Invalid Username.');
        username.focus();
        return false;
      }

      if (Reg1.test(password.value) == false) {
        alert('Invalid Password.');
        password.focus();
        return false;
      }
    }
    
    //add event listener for form submission
    document.getElementById('form_id').addEventListener('submit',validate);
 })();

<form id="form_id" action="userlogininput.cgi" name="form" method="post">
  Username :
  <input type="text" id="firstName" name="firstName" class="textboxH-300" required>
  <br> Password :
  <input type="password" id="password" name="password" class="textboxH-300" required>
  <br>
  <br>
  <input id="submitbtn" type="submit" value="Submit" />
</form>