Javascript - how to identify the pattern using RegExp

Question

The submit button should popup an alert message saying that the pattern on postcode and zipcode are wrong when user input it wrong. But I can't seem to make it work. I don't want to use the "pattern=" in form. I want to display an alert box. And I need to use the RegExp method. Any ideas why?

This is my code:

                <script>
                function validation(){
                  var icn = document.getElementById("icno").value;
                  var postcode = document.getElementById("pstcode").value;
                  var regexp = new RegExp(icn,"\d{6}-\d{2}-\d{4}");
          var regexp1 = new RegExp(postcode,"[0-9]{5}");

                  if (regexp.exec(icn)){
            return true;
                  }
                  else{
            alert("Please enter your IC correctly")
                  }

          if (regexp1.exec(postcode)){
            return true;
                  }
                  else{
            alert("Please enter your postcode correctly")
                  }
                }
                </script>
            </body>
    </html>

var regexp = /\d{6}-\d{2}-\d{4}/; var regexp1 = /[0-9]{5}/; - and add ^ / $ anchors if you need a full string match. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Mar 27, 2016 at 21:04

Aral Roca · Accepted Answer · 2016-03-27 21:26:20Z

1

If you want to use RegExp and .exec, try this:

function validation() {
  var icn = document.getElementById("icno").value;
  var postcode = document.getElementById("pstcode").value;
  var regexp = new RegExp(/\d{6}-\d{2}-\d{4}/);
  var regexp1 = new RegExp(/[0-9]{5}/);

  if (regexp.exec(icn) !== null) {
    return true;
  } else {
    alert("Please enter your IC correctly")
  }

  if (regexp1.exec(postcode) !== null) {
    return true;
  } else {
    alert("Please enter your postcode correctly")
  }
}

<form id="myForm" onsubmit="validation()">
  <fieldset>
    <legend>Regular Expression</legend>

    <label for="name">Name</label>
    <input type="text" id="name" size="30" placeholder="Enter name.">
    </br>
    </br>

    <label for="icno">IC No</label>
    <input type="text" id="icno" size="15" placeholder="E.g. 889601-11-6575">
    </br>
    </br>

    <label for="address">Address 1</label>
    <input type="text" id="address" size="30" placeholder="Address 1">
    </br>
    </br>

    <label for="address">Address 2</label>
    <input type="text" id="address" size="30" placeholder="Address 2">
    </br>
    </br>

    <label for="postcode">Postcode</label>
    <input type="text" id="pstcode" size="8" placeholder="E.g 21030">
    </br>
    </br>

    <input type="submit" value="Submit" id="btnSubmit">
  </fieldset>
</form>

But I recommend you to use .test, it's simple:

function validation() {
   var icn = document.getElementById("icno").value;
   var postcode = document.getElementById("pstcode").value;

   if (/\d{6}-\d{2}-\d{4}/.test(icn)) {
     return true;
   } else {
     alert("Please enter your IC correctly")
   }

   if (/[0-9]{5}/.test(postcode)) {
     return true;
   } else {
     alert("Please enter your postcode correctly")
   }
 }

edited Mar 27, 2016 at 21:26

answered Mar 27, 2016 at 21:19

Aral Roca

5,9978 gold badges52 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bluesky Izz Over a year ago

The icn method is working perfectly, thanks but the postcode isnt... I've tried both of your codings but the postcode isn't working. :)

Wiktor Stribiżew Over a year ago

The patterns used here do not validate the input as full strings and allow partial matches. The if-else logic will fail if ICN is correct and postcode is not.

Aral Roca Over a year ago

What result are you expecting?? For me is working if you want 5 characters long and the first character a digit 0 to 9.

Wiktor Stribiżew · Accepted Answer · 2016-03-27 21:53:58Z

0

When you define the RegExp, you can pass 2 arguments: 1) the pattern, 2) the flag(s). You passed the variable containing text to search as the first argument, and pattern as the second one.

The second issue is that you expect a full string match, so, you missed the anchors (^ - start of string - and $ - end of string).

var regexp = /^\d{6}-\d{2}-\d{4}$/;
var regexp1 = /^\d{5}$/;

And then correct the if blocks:

var icn_check = regexp.test(icn);
var pcode_check = regexp1.test(postcode);

if (icn_check && pcode_check){      // Only return true if both fields are valid
   return true;
}
else {
  if (!pcode_check) {                                // If post code is invalid
    alert("Please enter your postcode correctly");
  }
  if (!icn_check) {                                  // If ICN is invalid
    alert("Please enter your IC correctly");
  }
}

And use RegExp#test() instead of exec() to check if a string matches a regex.

See the JS fiddle demo

function validation() {
  var icn = document.getElementById("icno").value;
  var postcode = document.getElementById("pstcode").value;
  var regexp = /^\d{6}-\d{2}-\d{4}$/;
  var regexp1 = /^\d{5}$/;
  var icn_check = regexp.test(icn);
  var pcode_check = regexp1.test(postcode);
  if (icn_check && pcode_check) {
    return true;
  } else {
    if (!pcode_check) {
      alert("Please enter your postcode correctly");
    }
    if (!icn_check) {
      alert("Please enter your IC correctly");
    }
  }
}

<form id="myForm" onsubmit="validation()">
  <fieldset>
    <legend>Regular Expression</legend>
    <label for="name">Name</label>
    <input type="text" id="name" size="30" placeholder="Enter name.">
    <br/>
    <br/>

    <label for="icno">IC No</label>
    <input type="text" id="icno" size="15" placeholder="E.g. 889601-11-6575">
    <br/>
    <br/>

    <label for="address">Address 1</label>
    <input type="text" id="address" size="30" placeholder="Address 1">
    <br/>
    <br/>

    <label for="address">Address 2</label>
    <input type="text" id="address" size="30" placeholder="Address 2">
    <br/>
    <br/>

    <label for="postcode">Postcode</label>
    <input type="text" id="pstcode" size="8" placeholder="E.g 21030">
    <br/>
    <br/>

    <input type="submit" value="Submit" id="btnSubmit">
  </fieldset>
</form>

edited Mar 27, 2016 at 21:53

answered Mar 27, 2016 at 21:23

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

6 Comments

Wiktor Stribiżew Over a year ago

Please check the updated demo - the alerts show up if you do not provide valid input.

Bluesky Izz Over a year ago

but still, var regexp1 didn't work. I've tried to change it to [0-9]{5} also cant work it out. It is supposed to be the same as regexp but why it won't test it? @Wiktor Stribiżew

Wiktor Stribiżew Over a year ago

You mean, if the first ICN is valid, then the input is accepted, right? I updated the code.

Bluesky Izz Over a year ago

It works perfectly! But why my if-else just now is wrong? Can you explain more about this? :)

Bluesky Izz Over a year ago

Okay! I got it now! You're really great! Thanks a lot for helping!

|

Collectives™ on Stack Overflow

Javascript - how to identify the pattern using RegExp

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related