Member Avatar for ahmksssv

Hi frnds....

i need Javascript Validations...these validations by using onchange or onblur events..i mean when focus out from a textbox or any field then immediatley shows the error msg and focus will be at error field(not after submitting the form)..i want error immediatley focus out from the field...plz provide 4 or 5 fields, after i can manage...

i am having validations code..but in this way idon't have,basically i am not good in javascript...

plz help me asap..

Thank u...

  • 4 Contributors
  • 6 Replies
  • 119 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by Sam_john_2010

Dani AI

Generated

The easiest, most robust pattern for "validate on focus out" is: validate on blur (focus leaves) and also validate on input for live feedback. This matches what asked for (show error as soon as the user tabs out), and builds on 's good numeric-check idea by moving validation to blur/input and showing inline messages instead of alerts. Use built-in HTML5 validation where possible and the Constraint Validation API for custom checks — it reduces code and works across browsers (MDN Form validation).

Key points:

  • input runs as the user types; blur runs when leaving the field; change fires on blur only if the value changed. For immediate feedback on tab-out use blur.
  • Prefer inline error text (a sibling <span class="error">) and aria-invalid/aria-describedby for accessibility rather than alert boxes.
  • If you need to refocus a field when invalid, do it inside a short setTimeout(..., 0) in the blur handler to avoid re-entrancy problems.

Example pattern (4 fields: name, email, phone, password). Attach blur and input handlers, run simple checks, set error text and aria-invalid, and prevent submit if any errors:

<form id="signup">...inputs with a following <span class="error" aria-live="polite"></span>...</form>

document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('signup');
  var inputs = form.querySelectorAll('input');

  function showError(el, msg) {
    el.nextElementSibling.textContent = msg;
    el.setAttribute('aria-invalid', !!msg);
    if (msg) setTimeout(function(){ el.focus(); }, 0);
  }

  function validate(el) {
    if (el.required && !el.value) return showError(el, 'Required');
    if (el.type === 'email' && !el.checkValidity()) return showError(el, 'Enter a valid email');
    if (el.id === 'phone' && el.value && !/^\d{10}$/.test(el.value)) return showError(el, 'Enter 10 digits');
    showError(el, '');
  }

  inputs.forEach(function(i){
    i.addEventListener('blur', function(){ validate(i); });
    i.addEventListener('input', function(){ validate(i); });
  });

  form.addEventListener('submit', function(e){
    inputs.forEach(function(i){ validate(i); });
    if (form.querySelector('[aria-invalid="true"]')) e.preventDefault();
  });
});

Troubleshooting: if tabbing still skips validation, confirm the blur handler is attached to the actual input and that the error span is the immediate next sibling used by showError. If using libraries like jQuery, bind with .on('blur', ...).

Recommended Answers

All 6 Replies

Member Avatar for ahmksssv

Hi frnds....

i need Javascript Validations...these validations by using onchange or onblur events..i mean when focus out from a textbox or any field then immediatley shows the error msg and focus will be at error field(not after submitting the form)..i want error immediatley focus out from the field...plz provide 4 or 5 fields, after i can manage...

i am having validations code..but in this way idon't have,basically i am not good in javascript...

plz help me asap..

Thank u...

Hi reply plz..
If u have any problem with my english plz ask me..
this is urgent for me....i have to complete this today only..

plz reply only for 3 or 4 fields...(when we press tab than immediatly display error beside at the text box or alert box..)

Thank u...

Member Avatar for nav33n

First of all, this question belongs to Javascript forum. Its a javascript related question. 2nd, Post your code and tell us what is not working. We aren't 24/7 free coding service to provide you with ready made code when you say "Please help me asap", or, "Its urgentttt".

Member Avatar for Shanti C

Here is some expectablel solution not sure...
for example , if you have a quantity field then , if we entered any letters on that it will show an immediate alert "Please Enter Only Numbers (0-9)"
if this is your expected solution . then the following is the code for that...if not post clearly....

<form name="exampleform" method="post" action="">
<input name="qty" type="text"  id="qty" value="" onKeyUp="Only_Num(this.id)" size="3" maxlength="5">
</form>

function:

function Only_Num(id)
{
 if(isNaN(document.getElementById(id).value))
 {
  alert("Please Enter Only Numbers (0-9)..");
  document.getElementById(id).value='';
  document.getElementById(id).focus();
 }
 return;
}
Member Avatar for ahmksssv

Here is some expectablel solution not sure...
for example , if you have a quantity field then , if we entered any letters on that it will show an immediate alert "Please Enter Only Numbers (0-9)"
if this is your expected solution . then the following is the code for that...if not post clearly....

<form name="exampleform" method="post" action="">
<input name="qty" type="text"  id="qty" value="" onKeyUp="Only_Num(this.id)" size="3" maxlength="5">
</form>

function:

function Only_Num(id)
{
 if(isNaN(document.getElementById(id).value))
 {
  alert("Please Enter Only Numbers (0-9)..");
  document.getElementById(id).value='';
  document.getElementById(id).focus();
 }
 return;
}

Hi frnds..
Sry for posting this question in php forums...
Thank U shanthi for giving quick reply...
Now i can manage by using this one...

Hi naveen..
i am not asking about readymade code..i need just how to use onchange event ...i am having good validation code, but,that is working only on submitting the total form.....anyhow i am sry 4 distrubing u...

Thank u Naveen..

Member Avatar for nav33n

Ehm.. Okay :confused:

Member Avatar for Sam_john_2010

Nice Code

:icon_cool:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.