Member Avatar for Kamboodle

Basically I have a password reset field and in order for the password reset to be processed the user needs to enter their first name, last name, D.O.B and email address.


The first name, last name and email address are required fields, the rest are just additional security measures. My question is - is there any way to simply turn the box border red if nothing is entered?

I've tried numerous jquery plugins, tutorials to no avail. I think it is because the page itself has alot of other javascript and sql queries running.

Any help would be great.

  • 5 Contributors
  • 5 Replies
  • 256 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

A minimal, robust solution is to mark required fields with the HTML5 required attribute and then either style the invalid state with CSS or toggle a simple error class from JavaScript on blur and on submit. This keeps markup simple, avoids heavy plugin conflicts, and still enforces the rule on the client while leaving server-side validation as the final gate.

A compact example (HTML + CSS + vanilla JS):

<form id="resetForm">
  <input id="firstName" name="firstName" required placeholder="First name">
  <input id="lastName" name="lastName" required placeholder="Last name">
  <input id="email" name="email" required type="email" placeholder="Email">
  <button type="submit">Reset</button>
</form>
input.error {
  border: 2px solid #e44;
  box-shadow: 0 0 4px rgba(228,68,68,.35);
}
document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('resetForm');
  var req = form.querySelectorAll('[required]');

  Array.prototype.forEach.call(req, function (el) {
    el.addEventListener('blur', function () {
      var empty = !el.value.trim();
      el.classList.toggle('error', empty);
      el.setAttribute('aria-invalid', empty ? 'true' : 'false');
    });
  });

  form.addEventListener('submit', function (e) {
    var firstEmpty = null;
    for (var i = 0; i < req.length; i++) {
      if (!req[i].value.trim()) {
        req[i].classList.add('error');
        req[i].setAttribute('aria-invalid', 'true');
        if (!firstEmpty) firstEmpty = req[i];
      }
    }
    if (firstEmpty) {
      e.preventDefault();
      firstEmpty.focus();
    }
  });
});

Accessibility and safety notes: do not rely on color alone — include visible error text and aria-* attributes so assistive tech notices the problem. Use type="email" or a pattern for basic email checks, but always validate and sanitize on the server (echoing the server-side points made by and ). Plugin collections referenced by and are useful for rich UX, but a tiny script like the one above avoids many integration conflicts.

Troubleshooting tips: common failures come from multiple jQuery versions, scripts loaded before the DOM, CSS specificity hiding the border, or other scripts overriding classes/styles. Reproduce the behaviour in a stripped-down HTML file first, check the browser console for errors, and prefer a small vanilla handler (as in the snippet) when other scripts appear to interfere — this follows the simpler onblur approach suggested by while addressing accessibility and submit-time checks.

Recommended Answers

All 5 Replies

Member Avatar for Zahinize

i haven't implemented this, yet.
however, you can use, Css border & Javascript styling property..
,such as you can call a function onblur() in javascript,..
and in that function, you can change the border property of all the input boxes, using their id,..

Member Avatar for webdesignbd

Hi friend

I think u r right. This a very boring process. Only E-mail address is enough. And it is possible. In database verification part u can fixed is by option.

Munni

Member Avatar for Zahinize

security at the db level requires, input validation at the hardmost level, otherwise it is just a matter of time, your security breaches..
well, if you have learnt php, or java, in php..
preg_match() function is the best for limiting user input and making your application secured..

Member Avatar for parimalnarayan

Basically I have a password reset field and in order for the password reset to be processed the user needs to enter their first name, last name, D.O.B and email address.


The first name, last name and email address are required fields, the rest are just additional security measures. My question is - is there any way to simply turn the box border red if nothing is entered?

I've tried numerous jquery plugins, tutorials to no avail. I think it is because the page itself has alot of other javascript and sql queries running.

Any help would be great.

Yes, it can be done using JavaScript. This page will be useful to you

Member Avatar for drjohn

This Jquery form is probably more complex than you need, but it does check that all required fields are completed before submission.
http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
I've used this for a large form a client needed

This page has several form validation scripts
http://zoomzum.com/useful-jquery-form-validation/

and that site has another collection as well
http://zoomzum.com/jquery-form-validation-tutorials/

Don't think you searched very hard ;) , as I found the second page above quite easily.
It must have something that matches your needs.

EDIT I noticed a link to this one in the comments on the second page above
http://stefangabos.ro/php-libraries/zebra-form/

Edited by drjohn 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.