Question 197168 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to replace multiple if condition block to validate multiple input fields in a form – vue 3

In my application, there is a form and it has multiple input fields. Those input text fields are visible based on radio selection. Now, i am validating those input fields by passing fieldname and v-model of that particular text input.

It is working properly but there is huge usage of if condition block to check the empty validation. I was trying to map it properly but not working.

Here is the condition block

    const inputValidation = () => {
  if (form1.value.radio3 === 'Pass') {
    validateInputField('field1', formInputs.value.txtArea1);
  }
  if (formInputs.value.radio4 === 'Pass') {
    validateInputField('field2', formInputs.value.txtArea2);
  }
  if (formInputs.value.radio4 === 'fail') {
    validateInputField('field3', formInputs.value.txtArea6);
  }
  if (formInputs.value.radio5 === 'fail') {
    validateInputField('field4', formInputs.value.txtArea3);
  }
  if (formInputs.value.radio6 === 'Pass') {
    validateInputField('field5', formInputs.value.txtArea4);
  }
  if (formInputs.value.radio6 === 'fail') {
    validateInputField('field6', formInputs.value.txtArea5);
  }
  if (formInputs.value.radio7 === 'fail') {
    validateInputField('field7', formInputs.value.txtArea7);
  }
  if (formInputs.value.radio8 === 'fail') {
    validateInputField('field8', formInputs.value.txtArea8);
  }
  if (formInputs.value.radio9 === 'fail') {
    validateInputField('field9', formInputs.value.txtArea9);
  }
};

For this, i have created an temporary array of objects like this –

const tempFieldArray = [
  { radio: 'radio3', value: 'Pass', input: 'txtArea1', field: 'field1' },
  { radio: 'radio4', value: 'Pass', input: 'txtArea2', field: 'field2' },
  { radio: 'radio4', value: 'fail', input: 'txtArea6', field: 'field3' },
  { radio: 'radio5', value: 'fail', input: 'txtArea3', field: 'field4' },
  { radio: 'radio6', value: 'Pass', input: 'txtArea4', field: 'field5' },
  { radio: 'radio6', value: 'fail', input: 'txtArea5', field: 'field6' },
  { radio: 'radio7', value: 'fail', input: 'txtArea7', field: 'field7' },
  { radio: 'radio8', value: 'fail', input: 'txtArea8', field: 'field8' },
  { radio: 'radio9', value: 'fail', input: 'txtArea9', field: 'field9' },
];

I have tried to map it but it is not working. How to replace those if condition blocks into shorter syntax?

Tags:

2

Answers


  1. 0

    I haven’t tested but this should work

    const inputValidation = () => {
  for (const tempField of tempFieldArray) {
    if (form1.value[tempField.radio] === tempField.value) {
      validateInputField(tempField.field, formInputs.value[tempField.input]);
    }
  }
}
    Login or Signup to reply.
  2. 0

    asume u can get that trigger field
    and change tempArray to tempObject

    const tempFieldProp = 
    { 
      field1 : {radio: 'radio3', value: 'Pass', input: 'txtArea1' }, 
      field2 : {radio: 'radio4', value: 'Pass', input: 'txtArea2' }, 
      field3 : {radio: 'radio4', value: 'fail', input: 'txtArea6' }, 
      field4 : {radio: 'radio5', value: 'fail', input: 'txtArea3' }, 
      field5 : {radio: 'radio6', value: 'Pass', input: 'txtArea4' }, 
      field6 : {radio: 'radio6', value: 'fail', input: 'txtArea5' }, 
      field7 : {radio: 'radio7', value: 'fail', input: 'txtArea7' }, 
      field8 : {radio: 'radio8', value: 'fail', input: 'txtArea8' }, 
      field9 : {radio: 'radio9', value: 'fail', input: 'txtArea9' }
    }
  

    const inputValidation = (field) => {
        let props = tempFieldProp[field]
        return formInputs.value[props.radio] == props.value ? ()=> validateInputField(field, formInputs.value[props.input]) : ()=>{}
    }()

    return function and use it

    or you can’t get trigger field

    const tempFieldArray = [
  { radio: 'radio3', value: 'Pass', input: 'txtArea1', field: 'field1' },
  { radio: 'radio4', value: 'Pass', input: 'txtArea2', field: 'field2' },
  { radio: 'radio4', value: 'fail', input: 'txtArea6', field: 'field3' },
  { radio: 'radio5', value: 'fail', input: 'txtArea3', field: 'field4' },
  { radio: 'radio6', value: 'Pass', input: 'txtArea4', field: 'field5' },
  { radio: 'radio6', value: 'fail', input: 'txtArea5', field: 'field6' },
  { radio: 'radio7', value: 'fail', input: 'txtArea7', field: 'field7' },
  { radio: 'radio8', value: 'fail', input: 'txtArea8', field: 'field8' },
  { radio: 'radio9', value: 'fail', input: 'txtArea9', field: 'field9' },
];

tempFieldArray.map((field) => 
 formInputs.value[field.radio] === field.value ? 
       validateInputField(field.field , formInputs.value[field.input]) : else-function
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search