Loading...

Search jQuery

Search

jQuery Forum

Getting Started

jengine

Jquery Easy Validator

in Getting Started • 10 years ago

$(document).ready(function() {
// JQuery Form Validator By Aleksandre Mumladze
$("#submit").click(function() {
// Configuration
var formIdorClass = "form"; // Form Id or Class
var fieldError = "error"; // Error class ( warning : Not ID )
var usernameIdOrClass = "#username";
var passwordIdOrClass = "#password";
var emailIdOrClass = "#email";
// Minimal Length
var naMinLen = "6"; // username Max Length
var paMinLen = "8"; // password Max Length
var emMinLen = "7"; // email Max Length
// Maximal Length
var naMaxLen = "10"; // username Max Length
var paMaxLen = "20"; // password Max Length
var emMaxLen = "30"; // email Max Length
// Get Values
var naVal = $(usernameIdOrClass).val(); // username Value
var paVal = $(passwordIdOrClass).val(); // password Value
var emVal = $(emailIdOrClass).val(); // email Value
// Count Values
var naLen = naVal.length; // username Length
var paLen = paVal.length; // password Length
var emLen = emVal.length; // email Length
$(formIdorClass).find(":input").removeClass(fieldError);
var errorLog = "Form log : Field error occurred !";
if(naLen<naMaxLen&&naLen>naMinLen) {
if(paLen<paMaxLen&&paLen>paMinLen) {
if(emLen<emMaxLen&&emLen>emMinLen) {
$("#result").text("Query Successed !");
} else { console.log(errorLog); $(emailIdOrClass).addClass(fieldError); $("#result").text("Email must be between " + emMinLen + " and " + emMaxLen); }
} else { console.log(errorLog); $(passwordIdOrClass).addClass(fieldError); $("#result").text("Password must be between " + paMinLen + " and " + paMaxLen); }
} else { console.log(errorLog); $(usernameIdOrClass).addClass(fieldError); $("#result").text("Username must be between " + naMinLen + " and " + naMaxLen); }
return false;
});
});

<!doctype>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="pack.js"></script>
<style type="text/css">
.error {
border:1px solid red;
}
</style>
</head>
<body>
<form id="form">
<input name="username" id="username" type="text" class="input">
<input name="password" id="password" type="password" class="input">
<input name="email" id="email" type="text" class="input">
<button id="submit" name="submit">Submit</button>
<div id="result"></div>
</form>
</body>

1

Replies(3)

jay.blanchard

Re: Jquery Easy Validator

10 years ago

Is there a question?

jEngine

Re: Re: Jquery Easy Validator

10 years ago

no. tnx for reply.

im studying jquery and i shared it for newbies like i am.

code works perfectly.

jay.blanchard

Re: Jquery Easy Validator

10 years ago

Ah! Then you may want to include some narrative, something like "I just created this little function...." and "here is how you use it..."