I am trying to make my jQuery form validator work. I spent already 5 hours making it work, researching and stuff, but until now I can’t.
My code is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script>
$(document).ready(function(){
$("#formID").validationEngine();
});
</script>
</head>
<body>
<div id="headerBar" ><h1> The Book of Joy!</h1></div>
<div id="content" align="center">
<div id="contentText" align="center">Be a part of our team of IT experts. Apply now!</div>
<div id="leftContent" align=center></div>
<div id="rightContent" align=left>
<b>Signup now!</b>
<hr>
<form id="formID" method = "post" action = "AddApplicantServlet">
<fieldset>
<legend id="legendid">Applicant Registration Form</legend>
<table>
<tr><td>First Name: </td><td><input type = "text" name = fName class="validate[required,custom[onlyLetterSp]]"> </td></tr>
<tr><td>Middle Name: </td><td><input type = "text" name = mName class="validate[required,custom[onlyLetterSp]]"> </td></tr>
<tr><td>Last Name: </td><td><input type = "text" name = lName class="validate[required,custom[onlyLetterSp]]"> </td></tr>
<tr><td>Age: </td><td><input type = "text" name = age class="validate[required,custom[onlyNumberSp]],maxSize[2]"> </td></tr>
<tr><td>Gender: </td><td><select name = gender><option value='m'>Male</option><option value='f'>Female</option> </select> </td></tr>
<tr><td>Email Address: </td><td><input type = "text" name = email class="validate[required,custom[email]]"> </td></tr>
<tr><td>Contact No: </td><td><input type = "text" name = contactNumber class="validate[required]"></td></tr>
<tr><td>City of Residence: </td><td><input type = "text" name = city class="validate[required]"> </td></tr>
<tr><td>School: </td><td><input type = "text" name = school class="validate[required]"> </td></tr>
<tr><td>Course: </td><td><input type = "text" name = course class="validate[required]"> </td></tr>
<tr><td>Year Graduated: </td><td><input type = "text" name = yearGraduated class="validate[required,custom[onlyNumberSp]],maxSize[4]"></td></tr>
<tr><td>Previous Work Experience: </td><td><input type = "text" name = yearWorkExp class="validate[required,custom[onlyNumberSp]],maxSize[2]"> </td></tr>
<tr><td>Sourcing Channel: </td><td><select name = sourceChannel>
<option value='Jobstreet'>Jobstreet</option>
<option value='Direct'>Direct</option>
<option value='Referral'>Referral</option>
<option value='Board Exam'>Board Exam</option>
<option value='Oath Taking'>Oath Taking</option>
<option value='GradList'>GradList</option>
</select></td></tr>
<tr><td> <input type = "submit" value = SUBMIT></td></tr>
</table>
</fieldset>
</form>
<hr>
</div>
</div>
Why is it not working and how can I solve it?
EDIT: I used chromebug and it cannot find my js… Did I put it on the correct path?
Here are my files:

This is my chromebug and i don’t know what it means.. :(:

You forgot to import the plugin’s
.jsfiles. As per the plugin documentation you should be adding the following lines as well:(and make sure that those files are made available by your webapp as well, i.e. they don’t return 404)