Validating inputs using JavaScript RegEx

Question

I'm having this JS function to verify the user input and ensure it's a year between 2000-2021, it's working great, the problem is when I write invalid input it changes the outline to red, however when I write a valid input it's remain red. And even if I write valid input from the beginning it goes red.

var  batchRegex=/^[2][0][0-2][0-1]$/;
function checkBatch(batch){
if (batch = ""){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(!batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "none";
}
}
<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this.value)" required>
  <input type="submit" name="submit">
  </form>

sorry I forgot to include it, here it is var batchRegex=/^[2][0][0-2][0-1]$/; @MaheerAli — Ahmed Kena
– Ahmed Kena, Commented Jan 12, 2021 at 7:37
@herosuper I'm not sure, but before none I tried green and wasn't working — Ahmed Kena
– Ahmed Kena, Commented Jan 12, 2021 at 7:42

caramba · Accepted Answer · 2021-01-12 08:03:59Z

You have multiple issues in your code:

if (batch = ""){ should be if (batch == ""){
the regex /^[2][0][0-2][0-1]$/ matches only the values:

2000, 2001, 2010, 2011, 2020, 2021

but you want to match all values between 2000 and 2021.

Why not just try something simple like this:

function checkBatch(batch){
  if (batch.value >= 2000 && batch.value <= 2021){
    batch.style.outlineColor = "green";
  } else {
    batch.style.outlineColor = "red";
  }
}

<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this)" required>
  <input type="submit" name="submit">
  </form>

and instead of changing inline styles via javascript, just add a class where you can then change the style with CSS something like..

function checkBatch(batch){
  if (batch.value >= 2000 && batch.value <= 2021){
    batch.classList.remove('alert')
    batch.classList.add('success')
  } else {
    batch.classList.remove('success')
    batch.classList.add('alert')
  }
}

input.alert {
  outline-color: red;
}
input.success {
  outline-color: green;
}

<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this)" required>
  <input type="submit" name="submit">
  </form>

Oliver Jackman · Accepted Answer · 2021-01-12 08:44:09Z

Don't use JS to change the style of the input, use the built in input validation available within HTML5 and CSS. Use CSS to automatically handle and update the style.

If instead you use a number input you can place min and max values

<input type="number" min=2000 max=2021 name="numyr" required >

You can then use css using the :invalid pseudo element.

input:invalid {
  outline: 2px solid pink;
}

If you're adamant about using a regex on an input value then you can use the pattern attribute

<input type="text" pattern="^[2][0][0-2][0-1]$" >

It's still possible to do further validation before submit using the form submit event.

var  batchRegex=/^[2][0][0-2][0-1]$/;
function checkBatch(batch){
if (batch = ""){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(!batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "none";
}
}

input{
  min-width: 100px;
  display: block;
  margin: 5px;
}
input:invalid {
  outline: 2px solid pink;
}

<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this.value)" required>

  <input type="number" min=2000 max=2021 name="numyr" required >
 
  <input type="text" pattern="^[2][0][0-2][0-1]$" required >
  
  <input type="submit" name="submit">
  </form>

Collectives™ on Stack Overflow

Validating inputs using JavaScript RegEx

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related