Skip to main content

Real-Time Input Validator Using JavaScript

 

Introduction

In modern web applications, validating user input in real-time is a key aspect of user experience. For developers working with digital systems, communication protocols, or binary data, ensuring that users enter valid bits (0s and 1s) is crucial.

In this tutorial, we will create a Real-Time Bit Input Validator using HTML, CSS, and JavaScript, which checks for valid binary input and even-length sequences instantly without needing to submit a form.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Real-Time Input Bit Validator</title>

<style>
body{
    font-family: Arial, sans-serif;
    background:#f4f6f9;
    margin:40px;
}
.container{
    max-width:600px;
    margin:auto;
    background:white;
    padding:30px;
    border-radius:8px;
    box-shadow:0 3px 12px rgba(0,0,0,0.1);
}
h1{ color:#333; }
input{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:5px;
    margin-top:10px;
}
.valid{ border:2px solid #2ecc71; }
.invalid{ border:2px solid #e74c3c; }
.message{
    margin-top:12px;
    font-weight:bold;
}
.success{ color:#2ecc71; }
.error{ color:#e74c3c; }
</style>
</head>

<body>
<div class="container">
<h1>Real-Time Bit Input Checker</h1>
<p>Enter bits separated by commas (example: <strong>1,0,1,1</strong>)</p>

<input type="text" id="inputBits" placeholder="Type bits here">
<div id="message" class="message"></div>
</div>

<script>
const inputField = document.getElementById("inputBits");
const message = document.getElementById("message");

inputField.addEventListener("input", function(){
    const input = inputField.value.trim();
    if(input === ""){
        message.textContent = "";
        inputField.classList.remove("valid","invalid");
        return;
    }
    const bitsArray = input.split(',').map(bit => bit.trim());
    const validBits = bitsArray.every(bit => bit === "0" || bit === "1");

    if(!validBits){
        message.textContent = "Only 0 and 1 are allowed.";
        message.className = "message error";
        inputField.classList.add("invalid");
        inputField.classList.remove("valid");
        return;
    }
    if(bitsArray.length % 2 === 0){
        message.textContent = "✓ Valid input: Even number of bits.";
        message.className = "message success";
        inputField.classList.add("valid");
        inputField.classList.remove("invalid");
    }
    else{
        message.textContent = "✗ The number of bits must be even.";
        message.className = "message error";
        inputField.classList.add("invalid");
        inputField.classList.remove("valid");
    }
});
</script>

</body>
</html>

Adding Input Event Listeners to All Input Fields for Real-Time Validation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Input Bit Validator</title>
<style>
body{
    font-family: Arial, sans-serif;
    background:#f4f6f9;
    margin:40px;
}
.container{
    max-width:600px;
    margin:auto;
    background:white;
    padding:30px;
    border-radius:8px;
    box-shadow:0 3px 12px rgba(0,0,0,0.1);
}
h1{ color:#333; }
input{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:5px;
    margin-top:10px;
}
.valid{ border:2px solid #2ecc71; }
.invalid{ border:2px solid #e74c3c; }
.message{
    margin-top:12px;
    font-weight:bold;
}
.success{ color:#2ecc71; }
.error{ color:#e74c3c; }
</style>
</head>

<body>
<div class="container">
<h1>Real-Time Bit Input Checker</h1>
<p>Enter bits separated by commas (example: <strong>1,0,1,1</strong>)</p>

<input type="text" id="inputBits" placeholder="Type bits here">
<input type="text" id="inputBits1" placeholder="Type bits here">
<div id="message" class="message"></div>
</div>

<script>
const inputFields = document.querySelectorAll('input');
const message = document.getElementById("message");

inputFields.forEach(field => {
    field.addEventListener("input", function(){
        const value = field.value.trim(); // Correctly get value of this input
        if(value === ""){
            message.textContent = "";
            field.classList.remove("valid","invalid");
            return;
        }

        const bitsArray = value.split(',').map(bit => bit.trim());
        const validBits = bitsArray.every(bit => bit === "0" || bit === "1");

        if(!validBits){
            message.textContent = "Only 0 and 1 are allowed.";
            message.className = "message error";
            field.classList.add("invalid");
            field.classList.remove("valid");
            return;
        }

        if(bitsArray.length % 2 === 0){
            message.textContent = "✓ Valid input: Even number of bits.";
            message.className = "message success";
            field.classList.add("valid");
            field.classList.remove("invalid");
        }
        else{
            message.textContent = "✗ The number of bits must be even.";
            message.className = "message error";
            field.classList.add("invalid");
            field.classList.remove("valid");
        }
    });
});
</script>
</body>
</html>


Output 

People are good at skipping over material they already know!

View Related Topics to







Contact Us

Name

Email *

Message *

Popular Posts

Constellation Diagrams of ASK, PSK, and FSK with MATLAB Code + Simulator

📘 Overview of Energy per Bit (Eb / N0) 🧮 Online Simulator for constellation diagrams of ASK, FSK, and PSK 🧮 Theory behind Constellation Diagrams of ASK, FSK, and PSK 🧮 MATLAB Codes for Constellation Diagrams of ASK, FSK, and PSK 📚 Further Reading 📂 Other Topics on Constellation Diagrams of ASK, PSK, and FSK ... 🧮 Simulator for constellation diagrams of m-ary PSK 🧮 Simulator for constellation diagrams of m-ary QAM BASK (Binary ASK) Modulation: Transmits one of two signals: 0 or -√Eb, where Eb​ is the energy per bit. These signals represent binary 0 and 1.    BFSK (Binary FSK) Modulation: Transmits one of two signals: +√Eb​ ( On the y-axis, the phase shift of 90 degrees with respect to the x-axis, which is also termed phase offset ) or √Eb (on x-axis), where Eb​ is the energy per bit. These signals represent binary 0 and 1.  BPSK (Binary PSK) Modulation: Transmits one of two signals...
Read more

Fading : Slow & Fast and Large & Small Scale Fading (with MATLAB Code + Simulator)

📘 Overview 📘 LARGE SCALE FADING 📘 SMALL SCALE FADING 📘 SLOW FADING 📘 FAST FADING 🧮 MATLAB Codes 📚 Further Reading LARGE SCALE FADING The term 'Large scale fading' is used to describe variations in received signal power over a long distance, usually just considering shadowing.  Assume that a transmitter (say, a cell tower) and a receiver  (say, your smartphone) are in constant communication. Take into account the fact that you are in a moving vehicle. An obstacle, such as a tall building, comes between your cell tower and your vehicle's line of sight (LOS) path. Then you'll notice a decline in the power of your received signal on the spectrogram. Large-scale fading is the term for this type of phenomenon. SMALL SCALE FADING  Small scale fading is a term that describes rapid fluctuations in the received signal power on a small time scale. This includes multipath propagation effects as well as movement-induced Doppler fr...
Read more

Online Simulator for ASK, FSK, and PSK

Try our new Digital Signal Processing Simulator!   Start Simulator for binary ASK Modulation Message Bits (e.g. 1,0,1,0) Carrier Frequency (Hz) Sampling Frequency (Hz) Run Simulation Simulator for binary FSK Modulation Input Bits (e.g. 1,0,1,0) Freq for '1' (Hz) Freq for '0' (Hz) Sampling Rate (Hz) Visualize FSK Signal Simulator for BPSK Modulation ...
Read more

Theoretical BER vs SNR for BPSK

Theoretical Bit Error Rate (BER) vs Signal-to-Noise Ratio (SNR) for BPSK in AWGN Channel Let’s simplify the explanation for the theoretical Bit Error Rate (BER) versus Signal-to-Noise Ratio (SNR) for Binary Phase Shift Keying (BPSK) in an Additive White Gaussian Noise (AWGN) channel. Key Points Fig. 1: Constellation Diagrams of BASK, BFSK, and BPSK [↗] BPSK Modulation Transmits one of two signals: +√Eb or −√Eb , where Eb is the energy per bit. These signals represent binary 0 and 1 . AWGN Channel The channel adds Gaussian noise with zero mean and variance N₀/2 (where N₀ is the noise power spectral density). Receiver Decision The receiver decides if the received signal is closer to +√Eb (for bit 0) or −√Eb (for bit 1) . Bit Error Rat...
Read more

Understanding the Q-function in BASK, BFSK, and BPSK

Understanding the Q-function in BASK, BFSK, and BPSK 1. Definition of the Q-function The Q-function is the tail probability of the standard normal distribution: Q(x) = (1 / √(2Ï€)) ∫ x ∞ e -t²/2 dt What is Q(1)? Q(1) ≈ 0.1587 This means there is about a 15.87% chance that a Gaussian random variable exceeds 1 standard deviation above the mean. What is Q(2)? Q(2) ≈ 0.0228 This means there is only a 2.28% chance that a Gaussian value exceeds 2 standard deviations above the mean. Difference Between Q(1) and Q(2) Even though the argument changes from 1 to 2 (a small increase), the probability drops drastically: Q(1) = 0.1587 → errors fairly likely Q(2) = 0.0228 → errors much rarer This shows how fast the tail of the Gaussian distribution decays. It’s also why BER drops drama...
Read more

Pulse Shaping using Raised Cosine Filter (with MATLAB + Simulator)

  MATLAB Code for Raised Cosine Filter Pulse Shaping clc; clear; close all ; %% ===================================================== %% PARAMETERS %% ===================================================== N = 64; % Number of OFDM subcarriers cpLen = 16; % Cyclic prefix length modOrder = 4; % QPSK oversample = 8; % Oversampling factor span = 10; % RRC filter span in symbols rolloff = 0.25; % RRC roll-off factor %% ===================================================== %% Generate Baseband OFDM Symbols %% ===================================================== data = randi([0 modOrder-1], N, 1); % Random bits txSymbols = pskmod(data, modOrder, pi/4); % QPSK modulation % IFFT to get OFDM symbol tx_ofdm = ifft(txSymbols, N); % Add cyclic prefix tx_cp = [tx_ofdm(end-cpLen+1:end); tx_ofdm]; %% ===================================================== %% Oversample the Baseband Signal %% ===============================================...
Read more

What is - 3dB Frequency Response? Applications ...

📘 Overview & Theory 📘 Application of -3dB Frequency Response 🧮 MATLAB Codes 🧮 Online Digital Filter Simulator 📚 Further Reading Filters What is -3dB Frequency Response?   Remember, for most passband filters, the magnitude response typically remains close to the peak value within the passband, varying by no more than 3 dB. This is a standard characteristic in filter design. The term '-3dB frequency response' indicates that power has decreased to 50% of its maximum or that signal voltage has reduced to 0.707 of its peak value. Specifically, The -3dB comes from either 10 Log (0.5) {in the case of power} or 20 Log (0.707) {in the case of amplitude} . Viewing the signal in the frequency domain is helpful. In electronic amplifiers, the -3 dB limit is commonly used to define the passband. It shows whether the signal remains approximately flat across the passband. For example, in pulse shapi...
Read more

BER vs SNR for M-ary QAM, M-ary PSK, QPSK, BPSK, ...(MATLAB Code + Simulator)

📘 Overview of BER and SNR 🧮 Online Simulator for BER calculation of m-ary QAM and m-ary PSK 🧮 MATLAB Code for BER calculation of M-ary QAM, M-ary PSK, QPSK, BPSK, ... 📚 Further Reading 📂 View Other Topics on M-ary QAM, M-ary PSK, QPSK ... 🧮 Online Simulator for Constellation Diagram of m-ary QAM 🧮 Online Simulator for Constellation Diagram of m-ary PSK 🧮 MATLAB Code for BER calculation of ASK, FSK, and PSK 🧮 MATLAB Code for BER calculation of Alamouti Scheme 🧮 Different approaches to calculate BER vs SNR What is Bit Error Rate (BER)? The abbreviation BER stands for Bit Error Rate, which indicates how many corrupted bits are received (after the demodulation process) compared to the total number of bits sent in a communication process. BER = (number of bits received in error) / (total number of tran...
Read more