CODEWITHSUNDEEP
jqueryhtml
newbie
newbie

Reputation: 14960

JQuery Form Validator plugin not working

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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:

enter image description here

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

enter image description here

Upvotes: 0

Views: 6114

Answers (3)

RubyFanatic
RubyFanatic

Reputation: 2281

It's a couple months late but seems like the error happens because jQuery 1.6+ is required for the Validation Engine. It's stated under the Rules of Thumb section on https://github.com/posabsolute/jQuery-Validation-Engine. "From 2.2.4 and up, jquery 1.6+ is required because of prop()". Hope this helps.

Upvotes: 2

hivie7510
hivie7510

Reputation: 1246

One benefit that you have is that javascript(jquery) does not know anything about JSP/ASP/PHP or any other server side technology. So you can take the outputted html and troubleshoot it starting there.

At a glance, I do not see the javascript validation plugin being added. Is it now part of the core?

Upvotes: 1

BalusC
BalusC

Reputation: 1109655

You forgot to import the plugin's .js files. As per the plugin documentation you should be adding the following lines as well:

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

(and make sure that those files are made available by your webapp as well, i.e. they don't return 404)

Upvotes: 2

Related Questions