CODEWITHSUNDEEP
javascriptregexvalidationdom
Ahmed Kena
Ahmed Kena

Reputation: 27

Validating inputs using JavaScript RegEx

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>

Upvotes: 1

Views: 1234

Answers (2)

Oliver Jackman
Oliver Jackman

Reputation: 106

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>

Upvotes: 0

caramba
caramba

Reputation: 22480

You have multiple issues in your code:

  1. if (batch = ""){ should be if (batch == ""){

  2. 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>

Upvotes: 1

Related Questions