Member Avatar for hbmarar

hi,

I would like to know how to do it and request for help with a small form and the following validatin.

I wold like to have a validation in which the form is submitted and if the for mis not validated i would like to change the color of the text or any similiar effect with the other enterd values retained.

Is this possible? would anyone share with me how this could be done.

Thanking you in advance, I remain

Harish

  • 2 Contributors
  • 4 Replies
  • 190 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by hbmarar

Dani AI

Generated

As suggested, the simplest, most robust approach is to add an "error" CSS class to the label and/or input when validation fails. Below is a minimal, accessible example that answers 's request: one label + input, CSS that changes the label color, and a tiny JavaScript validator that prevents submit while leaving entered values intact.

<form id="sampleForm" action="/submit" method="post" novalidate>
  <label for="username" id="lbl-username">Username</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>
label.error { color: #c00; }      /* change label color */
input.error { outline: 2px solid #c00; }  /* visible focus for keyboard users */
.sr-only { position: absolute; left: -9999px; } /* for optional text-only error messages */
document.getElementById('sampleForm').addEventListener('submit', function(e){
  var u = document.getElementById('username');
  var l = document.getElementById('lbl-username');

  // clear previous state
  l.classList.remove('error');
  u.classList.remove('error');
  u.removeAttribute('aria-invalid');

  if (!u.value.trim()) {
    e.preventDefault();               // stop submission so values stay in the form
    l.classList.add('error');         // change label color
    u.classList.add('error');         // add visible cue on the field
    u.setAttribute('aria-invalid','true'); // accessibility hint
    u.focus();                        // bring user to the first problem
    return false;
  }
});

Notes and quick tips: client-side prevention (preventDefault or return false) keeps entered data visible. If your form posts to a server and the page reloads, the server must re-populate fields or use AJAX/localStorage to preserve values. Do not rely on color alone for errors — add aria-invalid, a short visible message, or an icon so keyboard and screen-reader users know what failed. To remove the highlight as the user types, add an input handler that removes the error class when value.trim() becomes nonempty. For multiple fields loop through them, collect the first invalid to focus, and apply the same class pattern. This example gives a concrete starting point you can expand safely and accessibly.

Recommended Answers

All 4 Replies

Member Avatar for tgreer

I would suggest that you define a CSS class for erroneous form elements. Then in your validation script, alter the class for elements that didn't pass. The validation function should simply "return false" to cancel the form submission. The form data will be retained automatically.

Member Avatar for hbmarar

hi,

I do have an average knoweldge of this combination.I would like to learn and use it for my need.Would you mind (I should not be asking so) if you could give me a form with one label and input element and the css part of the file ,It would be great help as i could learn and build my form on that logic.

Hope you find me reasonable and oblige

Wishing you a nice time

Harish

Member Avatar for tgreer

Yes, that's a perfectly reasonable request. Others may feel freel to chime in with an example... if not, then I'll work something up this weekend.

Member Avatar for hbmarar

hi,

Thanks a lot and I would hold off this for I would like to use yours logic.

Thanking you once again for the consideration and concern and wishing you a nice weekend , i remain

Harish

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.