Wsrtjtyk

I have a function in React I am using to check the validation state of a form on submit.

The form contains 2 types of inputs.

Text and Number

However so I may have some control over the length of numbers in the field, the number input prop is set as text with a maxLength prop applied.

What I need to now do is validate that when submitting the form, the values in those inputs are indeed numbers.

My state is:

 state = {

    firstName: '',

    lastName: '',

    accountNumber: '',

    sortCode1: '',

    sortCode2: '',

    sortCode3: ''

  }

I am attempting to check this using the following....

  checkValid = state => {

    const rgx = new RegExp(/^[0-9]{0,9}$/)

    const result = Object.keys(state).every(key => {

      if (key.match(/(firstName|lastName|)/)) {

        return !!state[key]

      }



      return rgx.test(state[key])

    })



    return result

  }

What I am trying to achieve is a check if on firstName and lastName to ensure there are values and then a check on all other props to ensure they are numbers and numbers only.

I cannot seem to make this work though as the form either always returns true or always returns false depending on how I amend the code.

As soon as any field is invalid, I would like to simply return false.

Got some small errors with the regex. Below code should work. =) This one will return false as soon as one field is empty or the value isn't a number on the fields where you want a number.

checkValid = state => {

    const rgx = new RegExp(/^[0-9]*$/)

    const result = Object.keys(state).every(key => {


    // If field is empty return false

    if (state[key] === '') return false;




    // If on firstName or lastName return true as we already know that the field isn’t empty

    if (key.match(/^(firstName|lastName)$/)) return true;




    // If not firstName or lastName test the field with rgx

    return rgx.test(state[key])

    })

    return result;

  }

It looks like you are trying to validate firstName and lastName based on their values simply being truthy and then the subsequent fields based on them being a number?

  checkValid = ({ firstName, lastName, ...rest }) => { 

    const result = !!firstName && !!lastName && Object.keys(rest).every(key => !isNaN(rest[key]))



    return result

  }

By deconstructing state you can pick off properties and perform validation separately, with less complex code.

If your only concern is that the other fields are in fact a number, isNan should work.