Regular expressions - Form data validation in JS

Question

I am trying to validate postal-code input with so-called regular expressions. Below is my code which doesn't seem to work for some reason. I need a solution completely in pure JS, not in other frameworks.

function postalCodeValidate() {
  var postalCode = document.getElementbyID("postalcode").value;
  var errorMessage = document.getElementbyID("pcodeerror").innerHTML;
  var postalPattern = /^\d{2}-\d{3}$/;
  
  if (POSTALCODE == "") {
    errorMessage = "You must enter a postal code!";
  } else if (POSTALCODE.match(postalPattern) == null) {
    errorMessage = "Wrong postal code format (00-000)";
  }
}

<div class="frm">
  <form>
    <h5>Enter adress details</h5>
    <div class="form-group">
      <label for="postalcode">Postal Code</label>
      <input type="text" class="form-control" id="postalcode" placeholder="Postal Code (00-000)">
      <div id="pcodeerror"></div>
    </div>
    <button type="button" onclick="postalCodeValidate();" class="btn btn-primary">Submit</button>
    <a href="#Register">
      <h6>Register</h6>
    </a>
  </form>
</div>

https://codepen.io/altug09/pen/yREoLe

errorMessage = "..." won't change the content of the element with id pcodeerror — Andreas
– Andreas, Commented Oct 20, 2018 at 13:40

Ele · Accepted Answer · 2018-10-20 13:46:47Z

You have some problems:

POSTALCODE doesn't exist, JS is case-sensitive, so POSTALCODE !== postalCode.

Assiging the string from document.getElementById("pcodeerror").innerHTML to a variable and then assign a message to that variable is not going to update document.getElementById("pcodeerror").innerHTML. So, you need to understand how the reference works, Etc.

And finally, you don't need the function match because you're not using the returned array. So, use the function test to check the regexp over a specific string.

function postalCodeValidate() {
  var postalCode = document.getElementById("postalcode").value;


  var postalPattern = /^\d{2}-\d{3}$/;
  if (postalCode == "") {
    document.getElementById("pcodeerror").innerHTML = "You must enter a postal code!";
  } else if (!postalPattern.test(postalCode)) {
    document.getElementById("pcodeerror").innerHTML = "Wrong postal code format (00-000)";

  }

}

body {
  font-family: Roboto;
  font-size: 18px;
  background: #283c86;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #45a247, #283c86);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #45a247, #283c86);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.frm {
  width: 50%;
  height: auto;
  margin: 0 auto;
  width: 400px;
}

form {
  margin-top: 30px;
  background: #ebebe0;
  padding: 20px 20px 40px 20px;
  display: block;
  border-radius: 20px;
}

.btn {
  float: right;
}

#mailerror,
#passerror {
  color: red;
}

<div class="frm">
  <form>
    <h5>Enter adress details</h5>


    <div class="form-group">
      <label for="postalcode">Postal Code</label>
      <input type="text" class="form-control" id="postalcode" placeholder="Postal Code (00-000)">
      <div id="pcodeerror"></div>
    </div>

    <button type="button" onclick="postalCodeValidate();" class="btn btn-primary">Submit</button>
    <a href="#Register">
      <h6>Register</h6>
    </a>
  </form>
</div>

Thank you Ele! I just missed that point, cuz I tried some code with global variables.. That's why I forgot it there in uppercase :)

Collectives™ on Stack Overflow

Regular expressions - Form data validation in JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related