Disable button based on string length range

Question

I have an input field and a button. The button should be enabled on the following simple scenarios:

• Input length is equal to 10, or
• Input length is greater than 15 (should be disabled for 11 to 14).

I tried !str.length = 10 || !str.length >= 15, but these conditions fail, as there is a conflict between both cases. I know I can check whether the length is not equal to 11, 12, 13, or 14, but that doesn't look good. Any better solution will be appreciated.

Answer 1

You used the single equal sign = in your first condition, which is used for setting variables, not checking what they are. It needs to either be == or ===, and in this case, === is preferred, since == is used to check between two of different types (e.g. string, integer).

Edit: Also, being somewhat new, I couldn't tell what the use of the exclamation marks before the first operands in your conditions were supposed to be, and therefore just copied that part, not knowing what the correct form of what you were trying to accomplish was, since it did not appear that you were trying to reverse the return value. Upon further investigation, I've come to believe that they were just not meant to be there. I've therefore edited my solution below by omitting them entirely.

Should be:

(str.length === 10 || str.length >= 15)

Edit: It seems necessary to state that, despite the OP saying it should be enabled if equal to 10 or "greater than 15," the OP clearly means equal to or greater than 15, because the OP indicates three times that this is what they mean by saying "(should be disabled for 11 to 14)," putting ">= 15," and again saying, "not equal to 11, 12, 13, or 14."

Answer 2

The OP's vague specification in terms of the enabled condition and another distinct condition for disabled which is not the negation of the former, as well as the upvotes on Lima's and Robert Bradley's answers does force a separate answer and test case of mine in addition to my original comment.

• There are only two options of expressing it, following the OP's criteria literally:

  • "... button should be enabled on ...

    • Input length is equal to 10
    • [OR] Input length is greater than 15" ...

    enabled: (str.length > 15 || str.length === 10)

  • The opposite or negation, disabled, then is ...

    disabled: (str.length <= 15 && str.length !== 10)

    ... and not what the OP put in parentheses, "(should be disabled for 11 to 14)," because this is already something else.

In whatever configuration one runs the proposed solutions of both Lima and Robert Bradley, their implementations do always fail because the used conditions never match any of the use cases neither for enabled nor for the negated enabled nor for the OP's specific/special disabled.

function isEnabledAccordingToOpsSpecification(str) {
  return (str.length > 15 || str.length === 10);
}
function isDisabledAccordingToOpsSpecAndDeMorgansLaws(str) {
  // De Morgan's laws - (From Wikipedia, the free encyclopedia)
  // see ... [https://en.wikipedia.org/wiki/De_Morgan%27s_laws]
  return (str.length <= 15 && str.length !== 10);
}


function isDisabledAccordingToAnotherOpsSpec(str) {
  return (str.length >= 11 && str.length <= 14);
}

function isDisabledAccordingToUserRobertBradley(str) {
  return (!str.length === 10 || !str.length >= 15);
}

function isDisabledAccordingToUserLima(str) {
  return !(str.length == 10 || str.length >= 15);
}

// after Lima's changes/edit.
function isDisabledAccordingToUserLimaAfterAppliedFix(str) {
  return !(str.length == 10 || str.length > 15);
}
function isEnabledAccordingToUserLimaAfterAppliedFix(str) {
  return (str.length == 10 || str.length > 15);
}


const enabledTestConfigAccordingToOpsSpec = [
  ['01234567', false],
  ['012345678', false],
  ['0123456789', true],         // length ... "equal to 10"
  ['0123456789a', false],
  ['0123456789ab', false],
  ['0123456789abc', false],
  ['0123456789abcd', false],
  ['0123456789abcde', false],   // length ... "equal to 15"
  ['0123456789abcdef', true],   // length ... "greater than 15"
  ['0123456789abcdef0', true],  // length ... "greater than 15"
  ['0123456789abcdef01', true], // length ... "greater than 15"
];

console.log(
  '- all tests passed for OP\'s "enabled" specification ?..',
  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isEnabledAccordingToOpsSpecification(str)
    )
);
console.log(
  '- all tests passed for OP\'s negated (De Morgan\'s laws) "enabled" specification ?..',
  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue !== isDisabledAccordingToOpsSpecAndDeMorgansLaws(str)
    //!expectedValue === isDisabledAccordingToOpsSpecAndDeMorgansLaws(str)
    )
);


const disabledTestConfigAccordingToAnotherOpsSpec = [
  ['01234567', false],
  ['012345678', false],
  ['0123456789', false],
  ['0123456789a', true],        // length ... "equal to 11"
  ['0123456789ab', true],       // length ... "equal to 12"
  ['0123456789abc', true],      // length ... "equal to 13"
  ['0123456789abcd', true],     // length ... "equal to 14"
  ['0123456789abcde', false],
  ['0123456789abcdef', false],
  ['0123456789abcdef0', false],
  ['0123456789abcdef01', false],
];

console.log(
  '\n- all tests passed for another OP\'s specific "disabled" specification ?..',
  disabledTestConfigAccordingToAnotherOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isDisabledAccordingToAnotherOpsSpec(str)
    )
);

console.log(
  '\n... disabled according to the negated OP\'s "enabled" specification ...\n- all tests passed for another OP\'s specific "disabled" specification ?..',
  disabledTestConfigAccordingToAnotherOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isDisabledAccordingToOpsSpecAndDeMorgansLaws(str)
    )
);

console.log(
  '\n... disabled according to user Robert Bradley ...\n- all tests passed for another OP\'s specific "disabled" specification ?..',
  disabledTestConfigAccordingToAnotherOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isDisabledAccordingToUserRobertBradley(str)
    )
);
console.log(
  '\n... disabled according to user Lima ...\n- all tests passed for another OP\'s specific "disabled" specification ?..',
  disabledTestConfigAccordingToAnotherOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isDisabledAccordingToUserLima(str)
    )
);


console.log('\n\n+++ Running Robert\'s and  Lima\'s implementations in all other test scenarios in case the intention of each implementation has been gotten wrong +++');

console.log([
  'Robert',

  disabledTestConfigAccordingToAnotherOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue !== isDisabledAccordingToUserRobertBradley(str)
    ),

  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isDisabledAccordingToUserRobertBradley(str)
    ),
  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue !== isDisabledAccordingToUserRobertBradley(str)
    //!expectedValue === isDisabledAccordingToUserRobertBradley(str)
    ),
].join(' ... '));

console.log([
  'Lima',

  disabledTestConfigAccordingToAnotherOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue !== isDisabledAccordingToUserLima(str)
    ),

  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isDisabledAccordingToUserLima(str)
    ),
  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue !== isDisabledAccordingToUserLima(str)
    //!expectedValue === isDisabledAccordingToUserLima(str)
    ),
].join(' ... '));

console.log('\nLima ... after having applied the fixes ...');
console.log(
  '- all tests passed for OP\'s "enabled" specification ?..',
  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue === isEnabledAccordingToUserLimaAfterAppliedFix(str)
    )
);
console.log(
  '- all tests passed for OP\'s negated "enabled" specification ?..',
  enabledTestConfigAccordingToOpsSpec
    .every(([str, expectedValue]) =>
      expectedValue !== isDisabledAccordingToUserLimaAfterAppliedFix(str)
    //!expectedValue === isDisabledAccordingToUserLimaAfterAppliedFix(str)
    )
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

Edit after Lima came up with an implementation fix

I adapted the test cases accordingly. Lima's changed function now meets the inverted/negated specification of the OP's original enabled specification; thus Lima's current disabled check meets the above mentioned case but not the OP's different specification of disabled which is not the fault of Lima's updated implementation but to be blamed on the OP's imprecise formulation of disabled.

Answer 3

try:

!(str.length == 10 || str.length > 15)

EDIT:

This returns true when the button needs to be disabled, and false when the button doesn't need to be disabled.

@Peter Seliger, why isn't this a good solution?