validate dates

[dper94]

Hi guys, i discover react-validify yesterday and i have been playing around with it today, it is an awesome library but i have a problem, i have a Select wrapper component that takes multiple option tags with multiple years. I need the user to enter a year before 2000 so i use the rule "before:2000" but when i select option 1999 option it keeps saying to me "the select must be before 2000". I have try different rules but none seens to work.

this is how my Select component looks:

const Select = ({ error, ...props }) => (
  <div className="form-group">
    <select className="form-control" {...props}>
      {props.children}
    </select>
    <span className="help-block">{error}</span>
  </div>
);

export default Select;

this is the complete form:

import React, { Component } from 'react';
import Form from 'react-validify';
import Input from './Input';
import Select from './Select';

class FormValidation extends Component {
  date = new Date();
  age = this.date.getFullYear() - 17;
  render() {
    return (
      <Form
        rules={{
          name: 'required|alpha',
          lastName: 'alpha|required',
          email: 'email|required',
          password: 'alpha_num|required|min:8',
          select: `required|before:${this.age}`
        }}
        errorMessages={{
          'alpha.name': 'your name should not have numbers in it',
          'alpha.lastName': 'your last name should not have numbers in it',
          'required.email': 'please enter a email',
          'email.email': 'the email you entered is invalid',
          'min.password': 'Your password should have at least 8 characters',
          'alpha_num.password':
            'Your password should have alpha numeric characters',
          'required.name': 'your name is required',
          'required.lastName': 'your last name is required'
        }}
        className="col-md-6 col-md-offset-3"
      >
        <Input name="name" />
        <Input name="lastName" />
        <Input name="email" />
        <Input name="password" type="password" />
        <Select name="select">
          <option>1995</option>
          <option>1996</option>
          <option>1997</option>
          <option>1998</option>
          <option>1999</option>
          <option>2000</option>
          <option>2001</option>
        </Select>
        <button
          submit
          onClick={values => console.log(values)}
          className="btn btn-primary"
        >
          Submit!
        </button>
      </Form>
    );
  }
}

export default FormValidation;

thanks in advance.

[zackify]

Have you tried <option value={1999}>1999</option> it may be passing it as a string and breaking it.

[zackify]

Also, why not filter through your options list and remove all dates greater than this.age? Why show the user an option they can't even select.

[dper94]

Thank you! i will try that later, i will post if that solve my issue :)

[dper94]

I try with <option value={1999}>1999</option> and with <option value={"1999"}>1999</option> and still doesnt work :( i try to put the element content as a number with <option value="1999">{1999}</option> and nothing happens :/

[zackify]

Alright, I'll copy your code into CRA and debug it right now

[zackify]

Figured it out: https://github.com/skaterdav85/validatorjs#beforedate Before is for dates, not years which is just a number, you need to be using max:1999 instead :)