<form class="admission" name="form" method="POST" action="#" enctype="multipart/form-data" id="new_student">
<h2> Student Details </h2>
<p>Fields marked with <span class="necessary-field">*</span> must be filled.</p>
<label>Admission number
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_number" id="Admission_number"/><br/>
<label>Admission Date
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_Date" id="Admission_Date" /><br/>
<h2>Personal Details</h2><p></p>
<label>First Name</label>
<input type="text" name="first_name" id="first_name" /><br/>
<label>Middle Name</label>
<input type="text" name="middle_name" id="middle_name" /><br/>
<label>Last Name
<span class="small">Last name or Surname</span>
</label>
<input type="text" name="last_name" id="last_name" /><br/>
<label>Course </label>
<select id="student_batch_id" name="student_batch_id">
<option value="11">10 - 2010 A</option>
<option value="14">LKG</option>
</select><br/>
<label>Date of Birth</label>
<input type="text" name="dob" id="dob"/><br/>
<label>Gender</label>
<select id="gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Blood Group</label>
<select id="student_blood_group" name="student_blood_group"><option value="">Unknown</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option></select>
<label>Identification Marks</label>
<input type="text" name="id_mark_1" id="id_mark_1" /><br/>
<label> </label>
<input type="text" name="id_mark_2" id="id_mark_2" /><br/>
<label>Place of Birth</label>
<input type="text" name="birth_palace" id="birth_palace" /><br/>
<label>Nationality</label>
<input type="text" name="nationalaity" id="nationalaity" /><br/>
<label>Mother Tongue</label>
<input type="text" name="mother_tongue" id="mother_tongue" /><br/>
<label>Religion</label>
<input type="text" name="religion" id="religion" /><br/>
<label>Cast</label>
<input type="text" name="cast" id="cast" /><br/>
<label>Creed</label>
<input type="text" name="creed" id="creed" /><br/>
<label>category</label>
<select id="student_category_id" name="category_id]">
<option value="">Select a Category</option>
<option value="1">GENERAL</option>
<option value="2">SC/ST</option>
<option value="3">OBC</option>
<option value="4">OEC</option>
<option value="5">NRI</option>
</select><br/>
<h2>Contact Details</h2><p></p>
<label>Address Line1</label>
<input type="text" name="address_line1" id="address_line1" /><br/>
<label>Address Line2</label>
<input type="text" name="address_line2" id="address_line2" /><br/>
<label>Locality</label>
<input type="text" name="locality" id="locality" /><br/>
<label>City</label>
<input type="text" name="city" id="city" /><br/>
<label>State</label>
<input type="text" name="state" id="state" /><br/>
<label>PIN</label>
<input type="text" name="pin_num" id="pin_num" /><br/>
<label>Telephone</label>
<input type="text" name="telephone" id="telephone" /><br/>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" /><br/>
<label>Upload User Photo</label>
<span class="small">Upload User Photo (60KB max)</span>
<input id="student_photo" name="student_photo" type="file" >
<input type="submit" value="NEXT">
<br/>
</form>
このフォームは検証対象です。以下の js ファイルをページに含めます。
<script src="../JavaScript/jquery.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
そして、Java スクリプト コードを追加します。
<script type="text/javascript">
$(document).ready(function(){
$("#new_student").validate({
rules: {
Admission_number: {
required: true,
minlength: 2
},
Admission_Date: "required"
},
messages: {
Admission_Date: "This is a comment form. Why in the heck would you leave the comment blank?",
Admission_number: {
required: "Stand up for your comments or go home.",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
}
}
});
});
</script>
私はjqueryが初めてですが。どこが間違っているのか理解できなかった
ここにjsFiddleリンクがありますhttp://jsfiddle.net/abelkbil/cVjez/