See if CSS :invalid selector is currently active in JavaScript

Question

I am working on a personal project and am trying to do some error validation on a form using HTML5 and JavaScript.

My HTML code:

<body>
    <header>
        <h1>BPMeasure</h1>
    </header>
    <form onsubmit="return false" oninput="o.value = main();">
        Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" value="0"><br/>
        Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" value="0"><br/>
        <br />
        Output: <output name="o" for="a b"></output>
    </form>
</body>

My JavaScript Code:

function calculate(track_a, track_b) {
    if(track_a > track_b) {
        return ((track_a - track_b) / track_a) * 100;
    } else if(track_a < track_b) {
        return ((track_a - track_b) / track_b) * 100;
    } else {
        return 0.0;
    }
}

function main() {
    var track_a = input_a.valueAsNumber;
    var track_b = input_b.valueAsNumber;

    var message = isTrackValid(track_a, track_b);
    if(message !== "") {
        return message;
    } else {
        return calculate(track_a, track_b);
    }
}

Right now, isValid() is a placeholder. I want it so when someone enters an invalid number into track_a or track_b they get an error message in the output (the return message portion). An invalid number is specifically something like 3+, 3++, 3.-4, 5..5, etc.

To figure out if the input was invalid I use this css code:

form input[type=number]:invalid {
    background-color: #ff8878;
}

Unfortunately, I have to use this because if someone enters an invalid number (like the examples above), it will always return NaN. This means that if the user hasn't even typed anything we have the value NaN, which means it continually displays an error message. This is why I have the invalid css code above.

My question is, is there a way in JavaScript to detect if the input currently has the attribute invalid, and if so can I return an error message until they either fix the error or clear the input?

Possible duplicate of a way to check validity of HTML5 forms? — JaviCasa
– JaviCasa, Commented Mar 30, 2016 at 16:09

Community · Accepted Answer · 2017-05-23 11:45:06Z

1

As said in this question's answer,

inputElement.checkValidity() returns true or false
inputElement.validity returns the validity-state object. inputElement.validity.valid returns true/false

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Mar 30, 2016 at 16:11

JaviCasa

7648 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick Hitchcock · Accepted Answer · 2016-03-30 15:54:11Z

You can use the inputs' checkValidity() method. It's supported by all modern browsers and IE10+.

From MDN:

Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an invalid event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.

function isValid(input_a, input_b) {
  if(!input_a.checkValidity() || !input_b.checkValidity()) {
    return 'error';
  }
  return '';
} //isValid

function calculate(track_a, track_b) {
  if (track_a > track_b) {
    return ((track_a - track_b) / track_a) * 100;
  } else if (track_a < track_b) {
    return ((track_a - track_b) / track_b) * 100;
  } else {
    return 0.0;
  }
}

function main() {
  var track_a = input_a.valueAsNumber;
  var track_b = input_b.valueAsNumber;

  var message = isValid(input_a, input_b);
  if (message !== "") {
    return message;
  } else {
    return calculate(track_a, track_b);
  }
}

form input[type=number]:invalid {
  background-color: #ff8878;
}

<form onsubmit="return false" oninput="o.value = main();">
  Track A:
  <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" value="0">
  <br/>Track B:
  <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" value="0">
  <br/>
  <br />Output:
  <output name="o" for="a b"></output>
</form>

Collectives™ on Stack Overflow

See if CSS :invalid selector is currently active in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related