Как сделать эту проверку ajax для нескольких полей в форме?

Question

У меня есть код ниже, где он валидирует форму. Как сделать так, чтобы я мог повторно использовать код для других полей помимо имени пользователя?

Как сделать так, чтобы я мог иметь несколько других полей и использовать один и тот же код jquery для проверки?

<form name="form" id="form" class="form" action="success.html" 
onsubmit="return validate(this)" method="post"> 
<label for="username">User Name:</label> 
<input type="text" name="username" id="username" /> 
<label for="fullname">Full Name:</label> 
<input type="text" name="fullname" id="fullname" /> 
<input type="submit" value="Submit" class="submit" /> 
</form> 

А вот JQuery:

// form validation function // 
function validate(form) { 
var username = form.username.value; 
var usernameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/; 

if(username == "") { 
inlineMsg('username','You must enter your username.',2); 
return false; 
} 
if(!username.match(usernameRegex)) { 
inlineMsg('username','You have entered an invalid username.',2); 
return false; 
} 

if(username.length>20){ 
inlineMsg('username','Username is too long (max 20 char)', 2); 
return false; 
} 


return true; 

} 


// START OF MESSAGE SCRIPT // 

var MSGTIMER = 20; 
var MSGSPEED = 5; 
var MSGOFFSET = 3; 
var MSGHIDE = 3; 

// build out the divs, set attributes and call the fade function 
function inlineMsg(target,string,autohide) { 
var msg; 
var msgcontent; 
if(!document.getElementById('msg')) { 
msg = document.createElement('div'); 
msg.id = 'msg'; 
msgcontent = document.createElement('div'); 
msgcontent.id = 'msgcontent'; 
document.body.appendChild(msg); 
msg.appendChild(msgcontent); 
msg.style.filter = 'alpha(opacity=0)'; 
msg.style.opacity = 0; 
msg.alpha = 0; 
} else { 
msg = document.getElementById('msg'); 
msgcontent = document.getElementById('msgcontent'); 
} 
msgcontent.innerHTML = string; 
msg.style.display = 'block'; 
var msgheight = msg.offsetHeight; 
var targetdiv = document.getElementById(target); 
targetdiv.focus(); 
var targetheight = targetdiv.offsetHeight; 
var targetwidth = targetdiv.offsetWidth; 
var topposition = topPosition(targetdiv) - ((msgheight - targetheight)/2); 
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET; 
msg.style.top = topposition + 'px'; 
msg.style.left = leftposition + 'px'; 
clearInterval(msg.timer); 
msg.timer = setInterval("fadeMsg(1)", MSGTIMER); 
if(!autohide) { 
autohide = MSGHIDE; 
} 
window.setTimeout("hideMsg()", (autohide * 1000)); 
} 

// hide the form alert // 
function hideMsg(msg) { 
var msg = document.getElementById('msg'); 
if(!msg.timer) { 
msg.timer = setInterval("fadeMsg(0)", MSGTIMER); 
} 
} 

// face the message box // 
function fadeMsg(flag) { 
if(flag == null) { 
flag = 1; 
} 
var msg = document.getElementById('msg'); 
var value; 
if(flag == 1) { 
value = msg.alpha + MSGSPEED; 
} else { 
value = msg.alpha - MSGSPEED; 
} 
msg.alpha = value; 
msg.style.opacity = (value/100); 
msg.style.filter = 'alpha(opacity=' + value + ')'; 
if(value >= 99) { 
clearInterval(msg.timer); 
msg.timer = null; 
} else if(value <= 1) { 
msg.style.display = "none"; 
clearInterval(msg.timer); 
} 
} 

// calculate the position of the element in relation to the left 
of the browser // 
function leftPosition(target) { 
var left = 0; 
if(target.offsetParent) { 
while(1) { 
left += target.offsetLeft; 
if(!target.offsetParent) { 
break; 
} 
target = target.offsetParent; 
} 
} else if(target.x) { 
left += target.x; 
} 
return left; 
} 
// calculate the position of the element in relation to the 
top of the browser window // 
function topPosition(target) { 
var top = 0; 
if(target.offsetParent) { 
while(1) { 
top += target.offsetTop; 
if(!target.offsetParent) { 
break; 
    } 
    target = target.offsetParent; 
} 
} else if(target.y) { 
top += target.y; 
} 
return top; 
} 

// preload the arrow // 
if(document.images) { 
arrow = new Image(7,80); 
arrow.src = "images/msg_arrow.gif"; 
} 

Answer 1

Вот плагин, который я использовал в прошлом: https://github.com/posabsolute/jQuery-Validation-Engine

Посмотрите там, и это может быть хорошо для вас. Я лично изменил его, чтобы соответствовать моим потребностям, но это немного экстремально.

Вы никогда не должны заново изобретать колесо :)