Geek Answers Handbook

How to use asp.net mvc 3 jquery validate using jquery dialog box that does ajax submit?

I use

asp.net mvc 3 jquery validate unobstructive javascript.

I am trying to write all my validation on the server via annotations and then add a new mvc 3 function to take care of the client side.

I have a dialog on which there is a button (just a button is not a submit button) that I want to send data to the server through ajax.

So, when the user clicks on the button, I make the submit form and return false to cancel the response.

I thought this would lead to a check, but that doesn't seem to be the case. How to make a client-side validation trigger?

Edit

<form method="post" id="TaskFrm" action="/Controller/Action"> <input type="text" value="" name="Name" id="Name" data-val-required="Name field cannot be left blank" data-val-length-max="100" data-val-length="task cannot exceed 100 characters" data-val="true"> </form> var $dialog = $('<div></div>').dialog( { width: 580, height: 410, resizable: false, modal: true, autoOpen: false, title: 'Basic Dialog', buttons: { Cancel: function () { $(this).dialog('close'); }, 'Create Task': function () { var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function () { alert('hi'); return false; }); createSubmitFrmHandler .validate(); var a = createSubmitFrmHandler .valid(); alert(a); } } });

This always returns true.

Edit 2

if I put a submit button on the form, it will show client validation (I use jquery to return false, as shown in my code).

So this means that I have scripts and that’s it, but it doesn’t work for unknown reasons when I try to make it programmatic.

Edit 3

I have inserted jquery validate && & jquery.validate.unobtrusive files on the main page. But when I stick to them in a partial view that contains fields that are loaded, and then forcibly submits confirmations.

I do not understand. I'm pretty sure the path is right, as I just dragged and dropping the file and launched it on my main page, and he understood the path. Having it in partial views is not a solution, since I'm going to do it several times, which means that every time a partial view is loaded, I get another copy of these files.

Change 4

I think this is just jquery.validate.unobtrusive, which for some reason needs to be loaded every time. However, I do not know why.

+6
jquery jquery-validate unobtrusive-javascript asp.net-mvc asp.net-mvc-3
source share
4 answers

Something like this should do the trick:

  $("#my-button").click(function (event) { event.preventDefault(); $("#my-form").validate(); if ($("#my-form").valid()) { // ... } });
+9
source share

The problem may be related to adding elements to the DOM after loading an unobtrusive script download. You can force it to bind validation handlers to new elements by calling $.validator.unobtrusive.parse("form") after creating the dialog.

 $("<div></div>").dialog(...) $.validator.unobtrusive.parse("form")

This solved our similar problem, although we display the form in a dialog box.

+7
source share
 $("#my-button").click(function (event) { event.preventDefault(); $.validator.unobtrusive.parse("#my-form"); if ($("#my-form").valid()) { // ... } });
+1
source share

This can be done using an ASP.NET MVC function called Remote Validation . All you have to do is decorate the property that you want to check with the [Remote] attribute, which passes the name of the method that performs the check and the controller on which it exists.

You can find an example of how a practical guide. Deploying Remote Validation in ASP.NET MVC

0
source share

More articles:


All Articles