form.valid() not working from .js file in 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.

M80 · Accepted Answer · 2013-06-14 15:45:24Z

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>

}

Sparky · Accepted Answer · 2013-06-14 16:17:44Z

0

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/

edited Jun 14, 2013 at 16:17

answered Jun 14, 2013 at 14:47

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

5 Comments

user2232861 Over a year ago

Thanks!! But now if a page loads with data such as in my case and then user clears it out the "First Name" and then submits then how I am going to validate it at client side if this value still remains same even after clearing out ?

Sparky Over a year ago

@user2232861; see my jsFiddle above. If you manually clear out the field, it gives a validation error, just like you want.

user2232861 Over a year ago

I see that you have explicitly specified the rules on form rules: { field1: { required: true }. Is that why it works ? If that is the case then it wont be useful in my scenario as i have many forms and single generic save function for each form as above. Each of these will have separate fields and I don't want to write rules for each field on each of these form. I want to utilize mvc- ajax- jquery form validation but somehow my form is not supporting the client side mvc validation thats why i took the route of form.valid().

Sparky Over a year ago

@user2232861, No, my jsFiddle works exactly the same when rules are declared inline. See: jsfiddle.net/JszxA

user2232861 Over a year ago

hmm i see....My button is actually outside of my HTML.BeginForm() in a separate div. Do you think that matters ? My input type was 'button' , i changed it to 'submit' then also it didnt help. NOt sure whats going on. is it .js script reference problem ?

Collectives™ on Stack Overflow

form.valid() not working from .js file in MVC

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related