Dynamically check value and display alarm popover

39
December 01, 2020, at 4:50 PM

I want to validate user input so he only provides numbers from a certain range with 0,5 steps. But I want my website to do it every time user swaps to another input form, not after he sends the data to my view. Can you give a hint of how should it be done? I don't know Javascript but I know there is onfocusout DOM event. Is it correct approach to use it, check whether or not value is valid and display an alarm based on that?

Answer 1

In general, there's no problem using onfocusevent.

Here's a hint on how to do this:

  • Create the input field
  • Add the onfocusout event handler and assign it a JavaScript function
  • Define the JavaScript function responsible for the validation process (which is, the same function we talked about in step 2)
  • This function takes the value inside the field and compares it, if it's not inside the range you desire then you can show an alarm or something like this.

I made a demo that doesn't involve alarming the user but instead it colors the border with either green or red, when you get desperate pay it a visit:

<input type="number" id="field1" onfocusout="validateField(0, 100, 'field1')"/><br/><br/>
    <input type="number" id="field2" onfocusout="validateField(200, 300, 'field2')"/><br/><br/>
    <input type="number" id="field3" onfocusout="validateField(400, 500, 'field3')"/><br/><br/>
    <script>
        function validateField(min, max, id) {
            const value = document.getElementById(id).value;
            if (value < min || value > max) {
                document.getElementById(id).style.borderColor = "red";
            }
            else {
                document.getElementById(id).style.borderColor = "lime";
            }
        }
    </script>

READ ALSO
PostgreSQL Database not connecting to Android app

PostgreSQL Database not connecting to Android app

My database is running fine because I tested it using Eclipse with simple Java code that just connects and reports back success or failI connect fine

40
Python Pynput release and press

Python Pynput release and press

Hi i want to make a script that prints "Released" when i release my left mouse buttonThe same for "pressed"

64
How do I create a function parameter (variable) for the answers to an inquirer.prompt question in javascript? MySQL is also involved

How do I create a function parameter (variable) for the answers to an inquirer.prompt question in javascript? MySQL is also involved

How do I create a function parameter (variable) for the answers to an inquirerprompt question in JavaScript? I know how to do this without using variables, but to make my function addToTable easier to use throughout my code, I wanted to use parameters

100