How to Validate "Digit" Range on handle validation in ReactJS

Question

I am trying to validate input data while entered the data. Where, I want to validate Input data in digit and Data Format is: 000-000-000. Where, also I have to validate each 000 value range in between (000-255) only.

Like: 000-000-000 to 255-255-255.

onHandleValidation = (event, submitted) =>
    {
        let fields = this.state.formFields;
        let errors = this.state.formErrors;
        let field = (event)? event.target.name: "";
        let Validate = true;

if (field === 'digit' || submitted) {
            if(fields.digit=== ""){
                errors["digit"] = "This field is required";
                Validate = false;
            } else {
                if(/^\d{3}-\d{3}-\d{3}$/.test(fields.digit) === false){
                    errors['digit'] = "digit Format 000-000-0000 Required";
                    Validate = false;
                }
            }
        }

        this.setState({formErrors: errors, formValid: formValid});
        return Validate;
    }

Validation for Format: 000-000-000 is done. For second Validation, I am trying, but, Not find any solution yet.

For Any Help. Thank You!

I'm not gonna say it's not possible, but I think the regex will look just like gibberish and not quite readable. Validating the second criteria should be done with some JS. It's short and concise — hungdoansy
– hungdoansy, Commented Nov 4, 2020 at 16:39
@dshung1997 Why do you say it's not possible? Yes, it will look like gibberish but any sufficiently useful regex looks like gibberish. If it doesn't look like gibberish then either your requirement is super simple or you've fatally overlooked the requirements. — MonkeyZeus
– MonkeyZeus, Commented Nov 4, 2020 at 17:00
@bharti You can only accept one answer. There's no need to bounce around. Select the one that helped you the most or ended up using. If you like my answer then an upvote is also appreciated. — MonkeyZeus
– MonkeyZeus, Commented Nov 4, 2020 at 17:03
@MonkeyZeus I don't say it's not possible my friend. Just look at the regex. It would cost you more than a few lines of JS if you'll need to maintain or change it. But you're sure that the requirement will never change, it's fine. — hungdoansy
– hungdoansy, Commented Nov 5, 2020 at 2:45

MonkeyZeus · Accepted Answer · 2020-11-04 16:57:14Z

1

This would be how to do it in pure regex

^(?:[0-1]\d\d|2[0-4]\d|25[0-5])-(?:[0-1]\d\d|2[0-4]\d|25[0-5])-(?:[0-1]\d\d|2[0-4]\d|25[0-5])$

https://regex101.com/r/QzpxmF/1/

answered Nov 4, 2020 at 16:57

MonkeyZeus

20.8k4 gold badges41 silver badges83 bronze badges

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

Comments

Julian Kleine · Accepted Answer · 2020-11-04 16:54:41Z

1

Just a basic idea of how to do this

const valid = "000-000-000";
const valid2 = "255-255-255";
const valid3 = "123-200-067";
const invalid1 = "000-000-0001";
const invalid2 = "000-0001";
const invalid3 = "000-000-300";

const validate = (digits) => {
  const allDigits = digits.split("-");
  console.log(allDigits);

  // return false if not enough parts
  if (allDigits.length !== 3) {
    console.log("not enough parts");
    return false;
  }

  // validate length of parts
  const validLengths = allDigits.every((digit) => digit.length === 3);
  // return false if one length is violated
  if (!validLengths) {
    console.log("at least one part has an incorrect length");
    return false;
  }

  // validate maximum and minimum
  const inRange = allDigits.every((digit) => digit >= 0 && digit <= 256);

  if (!inRange) {
    console.log("at least one is out of range");
    return false;
  }

  return true;
};

console.log("validate", valid, validate(valid));
console.log("validate", valid2, validate(valid2));
console.log("validate", valid3, validate(valid3));
console.log("validate", invalid1, validate(invalid1));
console.log("validate", invalid2, validate(invalid2));
console.log("validate", invalid3, validate(invalid3));

I am not the regex guru, so someone else might add a regex solution

edited Nov 4, 2020 at 16:54

answered Nov 4, 2020 at 16:42

Julian Kleine

1,5478 silver badges14 bronze badges

1 Comment

bharti parmar Over a year ago

Thank You, For your the basic idea. I have tried this, it's also working for me. Thank You!

Collectives™ on Stack Overflow

How to Validate "Digit" Range on handle validation in ReactJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related