Tags down


Javascript form validation(oninput)

By : Martin Salkovic
Date : October 17 2020, 08:10 PM
will help you I have two tables and functions. Function validation() validates username character length and checks if the name already exists in an array. ,
Tag & input Event
code :
<form id='xForm' onsubmit="return validate()">
document.forms.xForm.onsubmit = validate;
document.forms.xForm.addEventListener('submit', validate);
var xF = document.forms.xForm;
var fields = xF.elements;
var xI = fields.xInput;
var xM = fields.xMessage;

xF.oninput = validate;

function validate(e) {
  var names = ["tilen", "marko", "teja", "tisa", "rok", "luka", "mojca"];
  for (let i = 0; i < names.length; i++) {
    if (names[i] === xI.value.toLowerCase()) {
      return log(xI.value + " že obstaja.");
  if (xI.value.length > 20 || xI.value.length < 3) {
    return log("uporabniško ime mora biti vsaj 3 in ne sme biti daljše od 20 znakov.");
  } else {
    return log('');

function log(msg) {
  var color = msg === '' ? 'black' : 'red';
  Array.from(fields).forEach(function(fc) {
    fc.style.color = color;
  xM.value = msg.charAt(0).toUpperCase() + msg.slice(1).toLowerCase();
  return false;
body {
  font: 400 14px/1.5 Consolas;

th {
  text-align: left;
  vertical-align: top;
  width: 150px;

output {
  font: inherit;
  display: inline-block;
  width: 96%;

#xInput {
  transform: translateY(-3px);
  padding: 0 3px;
<form id='xForm' width='100%'>

  <table width='100%'>
      <th title="Username">Uporabniško Ime:</th>
      <td><input id="xInput" type="text" autocomplete="off"></td>
      <th title="Error Message">Obvestilo O Napaki:</th>
      <td><output id="xMessage"></output></td>


Share : facebook icon twitter icon

oninput event in html works fine till <form></form> is added?

By : Berjan Esguerra Dava
Date : March 29 2020, 07:55 AM
I hope this helps . Inside the form tags buttons tend to do the default action which is submit.
So change your button from,
code :
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>
<input type="button" onclick="myCreateFunction()" value="Create row">
<input type="button" onclick="myDeleteFunction()" value ="Delete row">

Vue.js input validation w VeeValidate - How to avoid onInput action while invalid

By : Luis Gerardo Saldaña
Date : March 29 2020, 07:55 AM
it fixes the issue like you access the errors collection in the VUE template, you can also access the same errors collection in your testValidation method
so replace
code :
const ariaInvalid = this.$refs.inputTitle.getAttribute('aria-invalid')
 const ariaInvalid = this.$validator.errors.has('title')

Javascript form validation oninput

By : user7818951
Date : March 29 2020, 07:55 AM
Any of those help There are some issues with your code
You're trying to bind the input event incorrectly
code :
psw.oninput = function(event)
 demo.innerHTML = "password cannot include               
a number";                                ^
document.getElementById('psw').addEventListener('input', function(event) {
  var myArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];

  for (var x = 0; x < myArray.length; x++) {
    if (this.value.includes(myArray[x])) {
      demo.innerHTML = "password cannot include a number ";
      break; // you need to break your loop
    } else {
      demo.innerHTML = "";

<input type="password" id="psw" />
<p id='demo'></p>

HTML5 input type number + oninput regex validation erase the field pressing dot

By : SlaveToTheNeedle
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Since you only want to control the length of the total number and of its decimal part, I would recommend the keydown event instead of the input event. The following expression
code :
<input type="number" name="name" step="any" onkeydown=
"return event.keyCode<32 || this.value.length<8 && /^\d*([.,]\d{0,2})?$/.test(this.value)"

Javascript Form Calculator with both onInput and onChange pointing to same function. Need to store onChange

By : shravankumar s malag
Date : March 29 2020, 07:55 AM
seems to work fine Background , This is because oninput calls calculateTotal without parameters
code :
<form id="pricingform" oninput="calculateTotal()">
var answer = "";
            function getBasePrice() {
                    var baseprice = parseInt(ticketssold.value)*parseFloat(ticketprice.value);
                    return baseprice;

            function getFees() {
                    var percent = parseFloat(ticketssold.value*ticketprice.value/100);
                    var dollar = parseInt(ticketssold.value);
                    var fees = +percent + +dollar;
                    return fees;

            function calculateTotal() {                
                    var baseprice = getBasePrice();         
                    var fees = getFees();             

                    if (answer == "CoverFees") {
                            var attendeespay = +baseprice;
                            var venuepays = +fees;
                            var revenuetotal = +baseprice - +fees;
                        } else {
                            var attendeespay = +baseprice + +fees;
                            var venuepays = 0.00;
                            var revenuetotal = +baseprice;

                    revenue.value = "$"+revenuetotal.toFixed(2);
                    attendees.value = "$"+attendeespay.toFixed(2);
                    cost.value = "$"+venuepays.toFixed(2); 
<div class="pricing-table">
            <form id="pricingform" oninput="calculateTotal()">

                <div class="price-row grid">
                    <div class="col-1-2">
                        Tickets Sold: <input type="text" name="ticketssold" id="ticketssold"> <i class="fas fa-times"></i>
                    <div class="col-1-2">
                        Ticket Price: <input type="text" name="ticketprice" id="ticketprice">
                <div class="price-row">
                    <div class="col-full">
                        <input type="radio" name="fees" value="PassOn" onchange="answer='';calculateTotal()" checked> <label>Pass Onto Attendee</label> <input type="radio" name="fees" value="CoverFees" onchange="answer='CoverFees';calculateTotal()"> <label>Cover the Fees</label>
                <div class="price-row grid">
                    <div class="col-1-3">
                        <label>Attendees Pay:</label><br /> <output id="attendees" name="attendees" for="a b">$0</span>
                    <div class="col-1-3">
                        <label>Estimated Cost:</label><br /> <output style="display:none;" type="hidden" id="percent" me="percent"></output><output id="cost" name="cost">$0</output>
                    <div class="col-1-3">
                        <label>Estimated Revenue:</label><br /> <output id="revenue" name="revenue">$0</output>
Related Posts Related Posts :
  • *NgFor toggle show/hide individual element
  • Add placeholder to multiple google chart string filters
  • Get value from radio button Angular Material Dialog
  • Use mergeWith of Lodash with nested objects
  • with javascript function created select onchange with counter parameter
  • SyntaxError using spread operator in webpack.config.js
  • Express - push to testing array on post request
  • Why should I use Interfaces in Typescript
  • What is a best way of detecting change of array?
  • Images are not getting the Div height when loading in jQuery
  • Find element by HTML in Cypress
  • Travsering table and storing values as key/value pair
  • Angular Material Checkbox doesn´t change state of checked
  • copy props from obj to obj in a functional Programming way
  • Bubble chart with NextJS and highcharts-react-official
  • Update value in table from Dialog Angular MAterial
  • ReferenceError because the variable is not being passed on
  • RequiredJS failed to Load a JS file
  • How can I disable the Stripe payment request button until a form is complete?
  • How to show a element immediately, such as a loading indicator, with Vue? nextTick isn't working as I expect
  • v-on:click with target not in the correct element?
  • Get last occurrence of item in array of arrays (Javascript)
  • Event binding with $(window) on dynamically created AJAX elements
  • How to use a variable in a custom function in Twilio Studio?
  • Prevent textarea from automatically scrolling when I change cursor position
  • Headless browser in Azure functions JavaScript?
  • Javascript to "fix" all hrefs of class with regex
  • How do I pass a value to list-item
  • Using component in entry component?
  • Working with different timezones in Javascript
  • Does MobX Observables have anything to do with RxJS ones?
  • Google extension how to inject my script to active tab and link with pop-up button?
  • Removing duplicate keys from object array
  • One @click event with multiple toggles
  • How to add TextToSpeech.talk("hi') action to a button
  • Not able to render vanilla webcomponent imported as template
  • How can I remove Materialize's select dropdown when using select2?
  • react-loadable multiple resource loading not working
  • Making SharePoint Lookup field multi selection in code with PNP/SP
  • input equal to a string for one array, and get string from same position from another array - JavaScript
  • Proper Method for Storing JavaScript Instances in Nan::ObjectWrap C++ Class
  • jQuery Calculate remaining characters length for input
  • Highcharts transform JSON into data without losing informations
  • How can I validate my file input name using regex?
  • Moment js interval for a day in 12 hours format
  • What would be the implementation of the function in this scenario
  • How to get text next a input tag using document.querySelector?
  • What could be reason of the error 'Maximum call stack size exceeded' inside Ember Data?
  • Leaflet polyline precision loss on zoom out
  • Convert Javascript regex to Typescript regex
  • Textext.js - Remove all tags and clean textarea
  • Array splice with unexpected results
  • Having trouble with multiple active states in ReactJS
  • Error 500 for some Ajax requests on server
  • Event call at the end of HTTP call
  • wooommerce add to cart based on gravity form radio button
  • Angular 6: table with *ngIF generates one <td> more than i need
  • how to load an external script with react?
  • Getting current stored value from database in a form on Cascading dropdowns in edit mode C# MVC
  • Best Way to Pass Query Parameters to URL Using Axios in Vue?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org