form.valid() not working from .js file in MVC - asp.net-mvc

Question

I have a .js file which is called on mvc form submit click. In that .js file function I am trying to validate the form before I do ajax post to my controller
I have also referred following script files at top of .js files as below: -
/// <reference path="~/Scripts/jquery-1.9.1.js" />
/// <reference path="~/Scripts/jquery-ui-1.10.0.js" />
/// <reference path="~/Scripts/jquery.unobtrusive-ajax.js" />
/// <reference path="~/Scripts/jquery.validate.js" />
/// <reference path="~/Scripts/jquery.validate.unobtrusive.js" />
save = function() {
var form = $("#formID");
var result1 = $("#formID").validate();
var result = $("#formID").valid();
if (result === true) {
$.ajax({
url: whatever the url,
data: form.serialize(),
type: 'POST',
...............
..........
});
}
}
My View is strongly typed and model class have all DataAnnotations.
In my scenario I have a form which loads with all data initially and hten I am trying to clear all required field data and trying to submit so that I can see the validation. When form loads I can see the html with all data- atributes such as below.
<input class="custom" data-val="true" data-val-required="First Name is required." id="txtFirstName" name="Form1[0].FirstName" placeholder="First Name" title="First Name" type="text" value="robert">
I always get 'result === true' and thats why it goes for ajax post to controller and it breaks.( i will have server side validation in future to avoid this )
Surprisingly even after I have cleared the data from "First Name" field I still see value="robert" in there....is that an issue ?
I am not sure why this is not working.

Answer 1

1 Firsty use "Chrome Developer Tool(CDT)" for debugging client side
2 Put a break point on the line mentioned below
3 Then in CDT put the below code, it will show you what is the field, and the validation that is failing
**$.data($('form')[0], 'validator').errorList**
[
Object
element: input#FirstName.text-box single-line input-validation-error
message: "The FirstName field is required."
__proto__: Object
Working code below
$(function () {
// Handler for .ready() called.
$('#mycustomsubmitbutton').click(function () {
var $form = $('form').first();
var result = $form.valid();
// Put you break point in the below if condition
if (result === true) {
alert("form valid");
} else {
alert("invalid form");
}
});
});
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
Employee
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<p>
<input id="mycustomsubmitbutton" type="button" value="Valid the form and make an Ajax request" />
</p>
</fieldset>
}

Answer 2

Quote OP:
"Surprisingly even after I have cleared the data from "First Name"
field I still see value="robert" in there....is that an issue ?"
<input class="custom" data-val="true"
data-val-required="First Name is required."
id="txtFirstName" name="Form1[0].FirstName"
placeholder="First Name"
title="First Name"
type="text"
value="robert">
value="robert" is your problem. Because of this attribute the field is not empty.
See: http://jsfiddle.net/M7skq/ and http://jsfiddle.net/JszxA/