Client side validation with asp.net mvc stopped working after I added a jQuery click event

Question

Client side validation is fine in my form without the javascript click event code below. I'm doing a 'Required' check on SearchQuery and ClassDate and client side validation is fine. But when I add the jQuery click event validation stops working for 'SearchQuery' or 'ClassDate' and I get a page error

If I simply comment out this click event the validation works fine again!

Here is my JavaScript including what I've tried to do to get validation working again, but had no luck. It seems like .valid() is always true!

 $("#submitSearch").click(function(event) { //$.validator.unobtrusive.parse($('form')); $('form').validate( { rules: { SearchQuery: { required: true }, ClassDate: { required: true } }, messages: { SearchQuery: { required: "Required" }, ClassDate: { required: "Required" } } }); //var v = $('form').validate(); var t = $('form').valid(); if (!$('form').valid()) { return; } event.preventDefault(); // this stops the submit until we have some location data var geocoder = new google.maps.Geocoder(); var address = document.getElementById('SearchQuery').value; geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { //alert("Location found: " + results[0].geometry.location); $("#latitude").val(results[0].geometry.location.G); $("#longitude").val(results[0].geometry.location.K); } $("form").submit(); }); }); 

 @using (Html.BeginForm("Search", "Home", FormMethod.Get)) { <div class="form-group"> @Html.TextBoxFor(model => model.SearchQuery, new { @class = "form-control"}) @Html.ValidationMessageFor(model => model.SearchQuery, "", new { @class = "text-danger" }) @Html.TextBoxFor(model => model.ClassDate, "{0:MM/dd/yyyy}", new { @class = "datefield form-control" }) @Html.ValidationMessageFor(model => model.ClassDate, "", new { @class = "text-danger" }) @Html.Hidden("latitude", Model.Latitude) @Html.Hidden("longitude", Model.Longitude) </div> <button type="submit" id="submitSearch" class="btn btn-default">Search</button> } 

Here is my viewmodel that has the 'Required' attribute.

public class YogaSpaceListViewModel
{
    [Required]
    [Location]
    [DisplayName("Location")]
    public string SearchQuery { get; set; }

    [DisplayName("Date")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime ClassDate { get; set; }

    public IPagedList<YogaSpaceResults> YogaSpaces { get; set; }

    public string LocationResults { get; set; }

    public string CenteredLocation { get; set; }

    public string Latitude { get; set; }

    public string Longitude { get; set; }
}

Now when I click submit with no text in 'SearchQuery' I get a server error message

Answer 1

This code:

$('form').validate(
    {
        rules:
        {
            SearchQuery: { required: true },
            ClassDate: { required: true }
        },
        messages:
        {
            SearchQuery: { required: "Required" },
            ClassDate: { required: "Required" }
        }
    });

have to be outside the definition of the button click event

Answer 2

I replaced

$("#submitSearch").click(function(event) 

with

$('form').submit()

and now validation is working again. I guess validation gets turned off with a click event. Or just doesn't work with it.