Foolproof with jQuery form plugin?

Jul 24, 2011 at 5:06 AM
Edited Jul 24, 2011 at 5:09 AM

I am using the jquery form plugin to ajax'ify my forms, and it seems incompatible with Foolproof validation for some reason.

I send my form data via json to my controller action, which then returns a json result.  Without Foolproof validation on my model (but still linked in <head>) this works fine and I get the json data in my success callback.  With foolproof validation on my model my browser prompts me to download the json data (instead of receiving a success callback).

If Foolproof is doing something to intercept the controller's return value, can I workaround this?

Here is some of what I am doing.

 

    public class NewAddress
    {
        public enum TYPE
        {
            LOCAL = 0,
            FOREIGN = 1,
        };

        [Required]
        public Int32 CustomerId { get; set; }
        [Required]
        public TYPE Type { get; set; }
        [Required]
        public String Description { get; set; }

        // For the foreign address
        [RequiredIf( "Type", TYPE.FOREIGN )]
        public String Address { get; set; }

        [RequiredIf( "Type", TYPE.LOCAL )]
        public String Address1 { get; set; }
        public String Address2 { get; set; }
        [RequiredIf( "Type", TYPE.LOCAL )]
        public String City { get; set; }
        [RequiredIf( "Type", TYPE.LOCAL )]
        public String State { get; set; }
        [RequiredIf( "Type", TYPE.LOCAL )]
        public String Zip { get; set; }
    }

Note if I just use [Required] it works fine.  But that is not the effect I want.

 

 

 
@using( Html.BeginForm( "Add", "Address", FormMethod.Post, new { id = "new_address" } ) )
{
    @Html.HiddenFor( m => m.CustomerId );
    <p>
        Local
        @Html.RadioButton( "TYPE", (int)MVC.WebUI.Models.NewAddress.TYPE.LOCAL, Model.Type == MVC.WebUI.Models.NewAddress.TYPE.LOCAL )
        Foreign
        @Html.RadioButton( "TYPE", (int)MVC.WebUI.Models.NewAddress.TYPE.FOREIGN, Model.Type == MVC.WebUI.Models.NewAddress.TYPE.FOREIGN )
<p>
        @Html.LabelFor( m => m.Description ) @Html.ValidationMessageFor( m => m.Description )
        @Html.TextBoxFor( m => m.Description )
    </p>
    <div class="clear">
    </div>
    <div id="local">
        <p>
            @Html.LabelFor( m => m.Address1 ) @Html.ValidationMessageFor( m => m.Address1 )
            @Html.TextBoxFor( m => m.Address1 )
        </p>
        <div class="clear">
        </div>
        <p>
            @Html.LabelFor( m => m.Address2 ) @Html.ValidationMessageFor( m => m.Address2 )
            @Html.TextBoxFor( m => m.Address2 )
        </p>
        <div class="clear">
        </div>
        <p>
            @Html.LabelFor( m => m.City ) @Html.ValidationMessageFor( m => m.City )
            @Html.TextBoxFor( m => m.City )
        </p>
        <div class="clear">
        </div>
        <p>
            @Html.LabelFor( m => m.State ) @Html.ValidationMessageFor( m => m.State )
            @Html.TextBoxFor( m => m.State )
        </p>
        <div class="clear">
        </div>
        <p>
            @Html.LabelFor( m => m.Zip ) @Html.ValidationMessageFor( m => m.Zip )
            @Html.TextBoxFor( m => m.Zip )
        </p>
        <div class="clear">
        </div>
    </div>
    <div id="foreign">
        <p>
            @Html.LabelFor( m => m.Address ) @Html.ValidationMessageFor( m => m.Address )
            @Html.TextAreaFor( m => m.Address )
            
        </p>
        <div class="clear">
        </div>
    </div>  
<p>
        <input class="button" type="submit" value="Add" />
    </p>
}

 

 

    $(document).ready(function () {
        $("#new_address").ajaxForm({ dataType: "json", resetForm: true, success: AddressAdd_Complete });
    });

    function AddressAdd_Complete(response, statusText, xhr, $form) {
        if (response.Success) {
            $("#addressTemplate").tmpl(response).appendTo("#addresses tbody").fadeIn();
            notifySuccess(response.Message);
        }
        else {
            notifyError(response.Message);
        }
    }

 

 

Thanks for any ideas

Coordinator
Jul 24, 2011 at 2:46 PM

A couple of questions:

When you say you are prompted to download a JSON file, is that happening when you first request the page or when the submit button is clicked?

Also, what type of client side validation are you using? Microsoft's flavor or jQuery validation? Do you have Unobtrusive on or off?

Jul 24, 2011 at 4:05 PM

When submit is clicked, my browser has me download the json data that my controller sent back after completing the action.

I am using jQuery validation with unobtrusive.  Here is my <head> and webconfig:

 

<script src="@Url.Content( "~/Scripts/jquery-1.5.1.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.form.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.tmpl.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.unobtrusive-ajax.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.validate.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.validate.unobtrusive.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/mvcfoolproof.unobtrusive.min.js" )" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content( "~/Scripts/mvc.jquery.configuration.js" )"></script>
    <script type="text/javascript" src="@Url.Content( "~/Scripts/facebox.js" )"></script>
    <script type="text/javascript" src="@Url.Content( "~/Scripts/jquery.wysiwyg.js" )"></script>
<configuration>
  <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

Coordinator
Jul 25, 2011 at 12:48 PM

One thing I see is that you don't have MvcFoolproofJQueryValidation.min.js included in your <head>. You need it and mvcfoolproof.unobtrusive.min.js.

Let me know if that helps. 

Jul 25, 2011 at 4:47 PM

Hmm, I included the script you requested and I was not prompted to download the json data, but the client side validation was not working.  Only the description field which is marked [Required] created a error message.  Once that was filled in I was able to submit the data with missing [RequiredIf] fields.