CODEWITHSUNDEEP
javascriptfunction
alex
alex

Reputation: 7601

validateForm function

The following function uses the JavaScript every method to check the validity of all the fields in a form:

// Input:

validatingFields: [{
  name: 'Name',
  type: 'text',
   validation: {
     isRequired: true,
     pattern: util.regex().email,
     minLength: 2
     maxLength: 4
   }
}]

// Function:

validateForm () {
  this.isValid = this.validatingFields.every(field => {
    const isRequired = field.validation.isRequired
    const maxLength = field.validation.maxLength
    const minLength = field.validation.minLength
    const pattern = field.validation.pattern
    const match = field.validation.match
    if (match) {
      const matchRegex = this.convertToRegex(match)
      return matchRegex.test(field.value)
    }
    if (pattern) {
      return pattern.test(field.value)
    }
    if (minLength) {
      return field.value.length >= minLength
    }
    if (maxLength) return field.value.length <= maxLength
    if (isRequired) return field.value
    return true
  })
}

The problem is, the function returns inside every if statement. So, for example, when minLength is present, maxLength is never checked.

How to modify the function so it validates every condition?

Upvotes: 1

Views: 1139

Answers (3)

Khawaja Asim
Khawaja Asim

Reputation: 1387

Another approach is what I did changes in your code:

validateForm () {
this.isValid = this.validatingFields.every(field => {
const isRequired = field.validation.isRequired
const maxLength = field.validation.maxLength
const minLength = field.validation.minLength
const pattern = field.validation.pattern
const match = field.validation.match
int count =0;
if (match) {
  const matchRegex = this.convertToRegex(match)
  count = matchRegex.test(field.value) ? count++ : count;
}
if (pattern) {
  count = pattern.test(field.value) ? count++ : count;
}
if (minLength) {
  count = (field.value.length >= minLength) ? count++ : count;
}
if (maxLength) count = (field.value.length <= maxLength) ? count++ : count;
if (isRequired) count = (field.value) > count++ : count;
return (count == 5) ? true : false;
})
}

As your code seems to have 5 validations, we can place a count for this and at the end if count is equals to 5 we return true else false.

Upvotes: 1

Junior John
Junior John

Reputation: 145

What about declaring an integer i=0 before you start the if statement, then inside every if condition, check if its true then i++ at the end check if i ==5 then return true (5 successful if conditions) else return false

validateForm () {
this.isValid = this.validatingFields.every(field => {
const isRequired = field.validation.isRequired
const maxLength = field.validation.maxLength
const minLength = field.validation.minLength
const pattern = field.validation.pattern
const match = field.validation.match

int i=0;
if (match) {
  const matchRegex = this.convertToRegex(match)
  if(matchRegex.test(field.value) == true)
    i++;
}
if (pattern) {
  if(pattern.test(field.value) ==true)
     i++;
}
if (minLength) {
  if(field.value.length >= minLength)
     i++;
}
if (maxLength) 
   if(field.value.length <= maxLength)
     i++;

if (isRequired) r
   if(field.value == true)
     i++;

if(i == 5)
   return true;
else
   return false;

}) }

Upvotes: 1

Lain
Lain

Reputation: 3726

One way is to store the validity in a variable and return it in the end:

validateForm () {
    this.isValid = this.validatingFields.every(field => {
        const isRequired = field.validation.isRequired
        const maxLength = field.validation.maxLength
        const minLength = field.validation.minLength
        const pattern = field.validation.pattern
        const match = field.validation.match

        var tValid = true;

        if (match) {
            const matchRegex = this.convertToRegex(match)
            tValid = matchRegex.test(field.value)
        }

        if (tValid && pattern){
            tValid = pattern.test(field.value)
        }

        if (tValid && minLength) {
            tValid = field.value.length >= minLength
        }

        if (tValid && maxLength) tValid = field.value.length <= maxLength
        if (tValid && isRequired) tValid = !!field.value

        return tValid
    })
}

Another way would be to chain the arguments:

validateForm () {
    this.isValid = this.validatingFields.every(field => {
        //..

        return
            (
                (pattern ? pattern.test(field.value) : true) &&
                (minLength ? field.value.length >= minLength : true) &&
                (maxLength ? field.value.length <= maxLength : true) &&
                (isRequired ? !!field.value : true)
            )
    })
}

Upvotes: 1

Related Questions