通过javascript验证表单

Question

im still new in validating forms with javascript so this my form with a default value of whats in the database my problem is when i tried entering invalid inputs in the street and barangay textfield the validation through javascript works but when it comes to the next textfield like for example in the city textfield the validation didnt work.

<form method="POST" action="#" onsubmit="return validateEmployeeAdd()">
    <center><br><br>
    <!-- <h1 style='color:blue'>EDIT EMPLOYEE</h1> -->
    <img src='images/2.png' width="100" height="100">
    <input type='hidden' name='add_id' value="<?php echo $data['add_id']?>"><br><br>
    <div>      
      <strong>Street:</strong>
      <input type='text' name='street' value="<?php echo $data['street']?>" id="street_id" autocomplete="off"><br>
      <span id="street_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>Barangay:</strong>
      <input type='text' name='brgy' value="<?php echo $data['brgy']?>" id="brgy_id" autocomplete="off"><br>
      <span id="brgy_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>City:</strong>
      <input type='text' name='city' value="<?php echo $data['city']?>" id="city_id" autocomplete="off"><br>
      <span id="city_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>Province:</strong>
      <input type='text' name='province' value="<?php echo $data['province']?>" id="province_id" autocomplete="off"><br>
      <span id="province_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>      
      <strong>Zip Code:</strong>
      <input type='text' name='zip' value="<?php echo $data['zip_code']?>" id="zip_id" autocomplete="off"><br>
      <span id="zip_error" class="text-danger font-weight-bold"></span><br>
    </div>
    <div>
        <input type='submit' value='Submit' name="submit" class='btn btn-primary'>
    </div>
    </center>
 </form>

Here is my script and i dont know which part i messed up and by the way i put the script after the ending of the form please help me

<script type="text/javascript" >

 function validateEmployeeAdd(){

 var street = document.getElementById('street_id').value;
 var brgy = document.getElementById('brgy_id').value;
 var city = document.getElementById('city_id').value;
 var province = document.getElementById('province_id').value;
 var zip = document.getElementById('zip_id').value;

  //Street validation
    if (street == "") {

        document.getElementById('street_error').innerHTML = "** Street address is requiered";
        document.getElementById('street_id').style.borderColor= "red";
        document.getElementById('street_id').style.borderStyle= "solid";
        return false;

    } else {

      if (street.trim().length==0) {
        document.getElementById('street_error').innerHTML = "** Street address should not consist of spaces only";
        document.getElementById('street_id').style.borderColor= "red";
        document.getElementById('street_id').style.borderStyle= "solid";
        return false;
      }
      if (street.length <= 3) {
        document.getElementById('street_error').innerHTML = "** Street address too short";
        document.getElementById('street_id').style.borderColor= "red";
        document.getElementById('street_id').style.borderStyle= "solid";
        return false;
      }

    }

//barangay validation
    if (brgy == "") {

      document.getElementById('brgy_error').innerHTML = "** Barangay address is requiered ";
      document.getElementById('brgy_id').style.borderColor= "red";
      document.getElementById('brgy_id').style.borderStyle= "solid";
      return false;

    } else {

      if (brgy.trim().length==0) {
        document.getElementById('brgy_error').innerHTML = "** Barangay address should not consist of spaces only";
        document.getElementById('brgy_id').style.borderColor= "red";
        document.getElementById('brgy_id').style.borderStyle= "solid";
        return false;
      }
      if (brgy.length <= 3) {
        document.getElementById('brgy_error').innerHTML = "** Barangay address too short";
        document.getElementById('brgy_id').style.borderColor= "red";
        document.getElementById('brgy_id').style.borderStyle= "solid";
        return false;
      }

      if (/^[a-zA-Z.- ]*$/.test(brgy) == false) {
        document.getElementById('brgy_error').innerHTML = "** Invalid special characters";
        document.getElementById('brgy_id').style.borderColor= "red";
        document.getElementById('brgy_id').style.borderStyle= "solid";
        return false;
      }


    }

  //City validation
    if (city == "") {

      document.getElementById('city_error').innerHTML = "** City address is requiered";
      document.getElementById('city_id').style.borderColor= "red";
      document.getElementById('city_id').style.borderStyle= "solid";
      return false;

    } else {

      if (city.trim().length==0) {
        document.getElementById('city_error').innerHTML = "** City address should not consist of spaces only";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }
      if (city.length <= 3) {
        document.getElementById('city_error').innerHTML = "** City address too short";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }
      if (/^[a-zA-Z ]*$/.test(city) == false) {
        document.getElementById('city_error').innerHTML = "** City address should consist of letters only";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }

    }

  //Province validation'
    if (province == "") {

      document.getElementById('province_error').innerHTML = "** Province address is requiered";
      document.getElementById('province_id').style.borderColor= "red";
      document.getElementById('province_id').style.borderStyle= "solid";
      return false;

    } else {

      if (province.trim().length==0) {
        document.getElementById('province_error').innerHTML = "** Province address should not consist of spaces only";
        document.getElementById('province_id').style.borderColor= "red";
        document.getElementById('province_id').style.borderStyle= "solid";
        return false;
      }
      if (province.length <= 3) {
        document.getElementById('province_error').innerHTML = "** Province address too short";
        document.getElementById('province_id').style.borderColor= "red";
        document.getElementById('province_id').style.borderStyle= "solid";
        return false;
      }
      if (/^[a-zA-Z ]*$/.test(city) == false) {
        document.getElementById('city_error').innerHTML = "** Province address should consist of letters only";
        document.getElementById('city_id').style.borderColor= "red";
        document.getElementById('city_id').style.borderStyle= "solid";
        return false;
      }

    }   

  //Username validation
    if (zip == "") {

      document.getElementById('zip_error').innerHTML = "** Zip Code is requiered";
      document.getElementById('zip_id').style.borderColor= "red";
      document.getElementById('zip_id').style.borderStyle= "solid";
      return false;

    } else {
      if (zip.trim().length==0) {
        document.getElementById('zip_error').innerHTML = "** Zip Code should not consist of spaces only";
        document.getElementById('zip_id').style.borderColor= "red";
        document.getElementById('zip_id').style.borderStyle= "solid";
        return false;
      }
      if (isNaN(zip)) {
        document.getElementById('zip_error').innerHTML = "** Zip Code should be a numeric character only";
        document.getElementById('zip_id').style.borderColor= "red";
        document.getElementById('zip_id').style.borderStyle= "solid";
        return false;
      }
      if (zip.length == 4) {
        document.getElementById('zip_error').innerHTML = "** Zip Code should be 4 numbers only";
        document.getElementById('zip_id').style.borderColor= "red";
        document.getElementById('zip_id').style.borderStyle= "solid";
        return false;
      }

    }
}

Answer 1

You literally stop the function from running after each validation. How do you expect for the function to continue executing when you are returning it?

Here's a showcase of what you are doing:
What do you think is going to happen?

log "yes" and then "oh, yesss" or just "yes" ?

const myFunc = (arg1, arg2) => {

    if(arg1) {
        return 'yes';
    }

    if(arg2) {
        return 'oh, yesss';
    }
}

console.log(myFunc(true, true));

In the above example, the function will stop when I first return it at the first if block.
Therefore, the above code is going to log "yes".

It will not continue to execute the next if condition, even if the condition is true, because you are RETURNING the function.

</div>