CODEWITHSUNDEEP
javascriptvalidation
BlockeeR
BlockeeR

Reputation: 241

Regular expressions - Form data validation in JS

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

Upvotes: 0

Views: 233

Answers (1)

Ele
Ele

Reputation: 33726

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>

Upvotes: 5

Related Questions