samedi 18 juin 2016

JQuery Form validatation not working

I am very new using JQuery validation plugin to validate my Form but it is not working.All the Ids are exact same as script(CourseCode,CourseName,etc.). Is there any wrong with this code?

<form id="courseForm"  method="post">
<table>
            <tr>
                <td>
                    @if (ViewBag.Message != null)
                    {
                        <p>@ViewBag.Message</p>
                    }
                </td>
            </tr>

            <tr>
                <td>Code</td>
                <td>
                    <input type="text" name="CourseCode" id="CourseCode" />
                </td>
            </tr>
            <tr>
                <td>Name</td>
                <td>
                    <input type="text" name="CourseName" id="CourseName" />
                </td>
            </tr>
            <tr>
                <td>Creadit</td>
                <td>
                    <input type="text" name="Creadit" id="Creadit" />
                </td>
            </tr>
            <tr>
                <td>Description</td>
                <td>
                    <input type="text" name="Description" id="Description" />
                </td>
            </tr>
            <tr>
                <td>Department</td>
                <td>
                    <select name="DepartmentId" id="DepartmentId">
                        @foreach (var department in allDepartments)
                        {
                            <option value="@department.Id">@department.DeptName</option>
                        }
                    </select>

                </td>
            </tr>
            <tr>
                <td>Semester</td>
                <td>
                    <select name="SemesterId" id="SemesterId">
                        @foreach (var semester in allSemesters)
                        {
                            <option value="@semester.Id">@semester.SemesterName</option>
                        }
                    </select>

                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="Save" />
                </td>
            </tr>

        </table>
    </form>

Here is Script for validation

       $(document).ready(function () {
           $("#courseForm").validate({
               rules: {

                   CourseCode: {
                       required: true,
                       minlength: 5
                   },
                   CourseName: {
                       required: true,

                   },
                   Creadit: {
                       required: true,
                       range: [0.5, 5]

                   },
                   Description: {
                       required: true

                   }

               },
               messages: {

                   CourseCode: {
                       required: "Please enter a Course Code",
                       minlength: "Your username must consist of at least 5 characters"
                   },
                   CourseName: {
                       required: "Please provide a Course Name",

                   },
                   Creadit: {
                       required: "Please provide a Creadit",
                       range: "Your creadit Range must be at least .5 to 5 ",

                   },
                   Description: {
                       required: "Please provide a Description"
                   }
               }
           });
       });    

Aucun commentaire:

Enregistrer un commentaire