Writing a summarized validation javascript code - php

Question

I have an HTML page on the admin site for managing user on a HTML/Javascript/PHP system that runs on browsers. I have close to 20 inputboxes because on one page i have combined several forms of new_user, forgot_password, Change_password and Edit_user_details.
This code is what i used to check the username's empty field, this means i have to write 20 of this lines;
My concern is--> How do i write a short, summarized but effective javascript code to check on empty fields. (I will also need to validate fields like digits, numbers, length, emails etc)
function RequiredFields(){
var username=document.forms["login"]["username"].value;
if (username==""||username==null){
alert("empty username")
document.login.username.focus();
if(document.all||document.getElementById){
document.login.username.style.background="pink";
}
return false;
}
}

Answer 1

You can use jQuery to check for empty fields, have a look at this code:
function Validate() {
$('form input[type="text"]').each(function(){
if (this.value=="")
alert('Value Required');
});
}
To validate things like emails, numbers etc, you would need to write a separate function for those particular text boxes.

Answer 2

See here: http://jsfiddle.net/TgCbB/1/
HTML
<input type="text" id="username" class="required" data-default="User Name"/>
<input type="text" id="email" class="required email" data-default="Email"/>
<input type="text" id="digits" class="required digits" data-default="Integer"/>
The important thing to note here is the class attribute, which indicates how it should be validated. (You could do this with a data- attribute, which would be better, but I used class for backwards compatibility).
You can now, with plain javascript, validate like so:
function validate(e){
var invalid = [];
var required = document.getElementsByClassName("required");
for (var i = 0; i < required.length; i++){
var req = required[i];
var val = req.value || "";
var def = req.hasAttribute("data-default") ? req.getAttribute("data-default") : "";
if (val == "" || val == def)
invalid.push(req);
req.className = req.className.replace(" invalid","");
}
var digits = document.getElementsByClassName("digits");
for (var i = 0; i < digits.length; i++){
var dig = digits[i];
var val = Number(dig.value || "");
var rem = val - Math.floor(val);
if (rem != 0)
invalid.push(dig);
dig.className = dig.className.replace(" invalid","");
}
var emails = document.getElementsByClassName("email"),
reg = /^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
for (var i = 0; i < emails.length; i++){
var em = emails[i];
var val = em.value || "";
if (!reg.test(val))
invalid.push(em);
em.className = em.className.replace(" invalid", "");
}
for (var i = 0; i < invalid.length; i++){
var inp = invalid[i];
var cls = inp.className.replace(" invalid", "");
inp.className = cls + " invalid";
}
}
Note that the could be made less verbose, but I opted for readability. The concept is, get each item with the class name we're validating against, iterate over them, and then mark it as invalid if it doesn't pass validation.