jQuery Validation doesn't work properly

Question

I have a problem with making jQuery.Validation work. I wrote a script. All JS files are included below. For an unknown reason for me, validation always returns that form is valid.

Here is my JS code:

$(document).ready(function()
{
    $("#contactForm").validate({
        rules: {
            inputName: "required",
            inputSurname: "required",
            inputEmail: {
                required: true,
                email: true
            },
            inputMessage: "required",
        },
        messages: {
            inputName: "Please enter your firstname",
            inputSurname: "Please enter your lastname",
            inputEmail: "Please enter a valid email address",
            inputMessage: "Please accept our policy"
        },
        submitHandler: function (form) {
            alert('valid form');
            form.submit();// for demo
            return false;      // for demo
        }
    })   
})

Here you can find my form:

@using (Html.BeginForm("SendMail", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", name = "contactForm", id = "contactForm" }))
            {
                @Html.ValidationSummary(true);
                @Html.AntiForgeryToken();
                <div class="col-lg-8">
                    <div id="Contact" class="jumbotron contact-form">
                        <div class="panel-heading">
                            <h1 class="panel-title">Kontakt</h1>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">Imie</span>
                            @Html.TextBoxFor(model => model.name, new { @class = "form-control", placeholder = "Twoje imię", id = "inputName" })
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">Nazwisko</span>
                            @Html.TextBoxFor(model => model.surname, new { @class = "form-control", placeholder = "Twoje nazwisko", id = "inputSurname" })
                        </div>    
                        <div class="input-group">
                            <span class="input-group-addon">Email</span>
                            @Html.TextBoxFor(model => model.emailAdress, new { @class = "form-control", placeholder = "Adres email", id = "inputEmail" })  
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">Treść<br /> wiadomości</span>
                            @Html.TextAreaFor(model => model.body, new { @class = "form-control", placeholder = "Treść wiadomości", id = "inputMessage", name = "inputMessage", rows="4" })
                        </div>
                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-1">
                                <button type="submit" class="btn btn-default">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            }

As you can see all field are required but even if I leave them empty end press submit, jQuery tells that the form is valid.

Here JSFiddle with working sample: CLICK

Answer 1

You need to adjust the rules-object to match the name-attribute of the form-elements.

rules: {
        'name': {required:true},
        'surname': {required:true},
        'emailAdress': {
            required: true,
            email: true
        },
        'body': {required: true},
    }

When trying Anto J Subash's version the naming of the name-attribute was probably mismatched due to capitalization. In addition to Anto J Subash's answer I heavily suggest to pass the index stringified ("'name'") and avoid passing it as "Name", to prevent possible problems due to reserved keywords in JS/jQuery.

Working JSFiddle

Answer 2

you have to set the name not the id . you have to set the rule for the name validation are based on the elements name.

try

$("#contactForm").validate({
        rules: {
            Name: "required",
            Surname: "required",
            Email: {
                required: true,
                email: true
            },
            Message: "required"
        }
    })