Dynamically check value and display alarm popover

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>

POPULAR ONLINE

How can I make the delete buttons fully functional with right ID using php, AJAX or MySQL?

How to use Java Applet in AngularJS client

Load multiple functions from multiple javascript files

initial user data for mysql server

Properly break a firebase forEach loop

For the same font style, how to resolve the difference between MAC and Windows font width and height?

enter image description here

Android

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

Python

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"

MySQL

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