Member Avatar for bhanu1607

Hi to all,


After comming alert, cursor should not go to the next field. i am a beginner to script functions. can any one give me solution .

<script>
function validateDate(strdate)
{
	if(strdate.length < 8 || strdate.length > 8)
	{
	alert("Error:Enter Valid Date");
	}
	else
	{
	ValidateNum(strdate);
	}
}
</script>

<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
 Bhanu <input type="text" name ="bhanu" onblur = "validateDate(this.value);" >
 <input type="submit" value="submit">
  
 </body>
</html>

regards
Bhanu

  • 3 Contributors
  • 2 Replies
  • 123 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

A short diagnosis and a few reliable fixes.

As described, the problem comes from showing an alert while the field is losing focus. and correctly suggested forcing focus back, but re-focusing from a blur handler or using modal alert() is fragile: browsers complete the blur/focus sequence and alerts steal focus, so the caret can still move or behavior can differ by browser and input method (keyboard vs mouse).

Better, more robust options:

  • Validate on form submit and prevent the submission if the value is invalid. This avoids fighting the browser focus model and keeps keyboard navigation predictable.
const form = document.getElementById('myForm');
const dateInput = document.getElementById('myDate');

form.addEventListener('submit', function (e) {
  if (dateInput.value.length !== 8) {
    e.preventDefault();
    dateInput.focus(); // restore focus from submit handler (more reliable)
    // show an inline message instead of alert
  }
});
  • Use the HTML5 Constraint Validation API so the browser shows the message and blocks submit until fixed. Set a custom message while the value is invalid and call the form validity UI rather than using alert():
dateInput.addEventListener('input', function () {
  this.setCustomValidity('');
  if (this.value.length !== 8) this.setCustomValidity('Enter an 8-digit date (YYYYMMDD)');
});

form.addEventListener('submit', function (e) {
  if (!form.checkValidity()) { e.preventDefault(); form.reportValidity(); }
});

Practical tips: avoid modal alert() for field validation (it disrupts flow); consider type="date" or an input mask for date formats; give the field an id so handlers can find it; test keyboard Tab behavior. If you absolutely must re-focus from blur, the setTimeout(..., 0) workaround sometimes helps but is a hack and not recommended for production. For details on setCustomValidity and browser validation, see MDN: HTMLInputElement.setCustomValidity.

Recommended Answers

All 2 Replies

Member Avatar for Shanti C

use this line after your alert.

alert("Error:Enter Valid Date");
document.getElementById("num").focus();
return false;

"num" should be your next input filed id.

Edited by Shanti C because: n/a
Member Avatar for Taywin

"onblue" event is sometimes tricky because it may not result what you want. If you want to use it, be more careful. Anyway, if you want it to be local, you could do it as followed...

<script>
// pass in the whole element for easier validation
function validateDate(elem) {
  var strdate = elem.value
  if(strdate.length != 8) {  // less than or greater than the same number means 'not equal'
    alert("Error:Enter Valid Date");
    elem.focus()  // force focusing to itself
  }
  else {
    ValidateNum(strdate);  // not sure what this would do...
  }
}
</script>

<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
 Bhanu <input type="text" name ="bhanu" onblur = "validateDate(this);" >
 <input type="submit" value="submit">
  
 </body>
</html>
Edited by Taywin because: n/a
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.