[RESOLVED]Display a PartialView, then form automatically got submitted – why? How to prevent this?

Hi,

I’m working on a MVC3 app, with c#, Razor view, etc. 1 page has given me a strange error:

This page has a list of links, click on each link will display a partialview in a certain <div> at the bottom part of this page. So far, all other links work great, except 1 link.

When I click on this link, the correct partialview gets displayed, in this <div>;  on this PartialView page, there is a form, with <input> fields and a "Submit" button at the bottom. The <input> fields are required, so if someone tries to submit this form
without any info typed in, an error message will be displayed, and the "Submit" button will be disabled.

SO, here is the problem: this PartialView gets displayed with the error message shown, and the "Submit" button disabled – as if someone already clicked the "Submit" button…but this is not the case.

I looked through the code for this PartialView page, but did not see anything suspicious…What is the reason for this strange behavior? what should I be looking for?

THanks,

Claudia

claudia888

SO, here is the problem: this PartialView gets displayed with the error message shown, and the "Submit" button disabled – as if someone already clicked the "Submit" button…but this is not the case.

explain clearly the problem. what is the issue here?

Where do you place the validation?

On submit button click or on document load?

If you have placed the validation on document load, then this kind of strange behaviour would happen.

hi mgn_v,

Thanks for your insight – I’m thinking on the same order, but do not know how to fix this. The validation is NOT on submit – it is on field change with a certain class, under document load; because this page/form has multiple fields; so the current logic
is:

as soon as a field is changed, if it is empty, then an error message will be displayed right below this particular field.

SO here is the code:

<input type="file" name="AdImage1" class="adImage" value="" />

@Html.ValidationMessageFor(model => model.AdImage1)

<input type="file" name="AdImage2" class="adImage" value="" />

@Html.ValidationMessageFor(model => model.AdImage2)

and here is the jQuery validation:

$(document).ready(function() {

   $(‘.adImage).change(function() {

       if (….) // here is the validation condition

      {

              $(‘#submitButton’).attr("disabled", true);

              $(this).next(‘.field-validation-valid’).addClass("field-validation-error").html("my error message is here.");

      }

What I don’t understand is: When the page is loaded initially, there is no change on each field — why would the jQuery code be triggered thus show the error message?

Can you suggest a direction to fix this? if I still want to validate per field, NOT on submit?

Thanks,

Claudia

More Info:  I run the debugger and wacthed line by lin how this partialview is displayed…somehow when this page gets loaded, all the @Html.ValidationMessageFor() gto called…thus the error messages show up for the <input> fields…but
why?

My understanding is that they should only be triggered when the <input> filed gets changed.

BTW – the same code works previously; it only started having this strange behavior AFTER it is changed to a PartialView (which I have to do due to new requirement).

Hope this info helps.

Hi Claudia,

Can you paste your exact code, it might lead us solving your problem instead of Hit and Miss.

Hi Claudia,

Did you set the focus to the control while loading the partial view?

I guess, by default the focus is set to the control where the validation happens.

Can you add the alert(‘test’) inside the $(‘.adImage).change(function() ?

So that you can check whether the change event trigger as soon the page loads. In that case, you have to write the handler / bind the event to the control.

Hope this gives you better picture.

On click of link, are you passing any to the action which is rendering the partialview?

if you are passing any blank model, then use ModelState.Clear() as first statement in the action

Update – I solved the issue.

Thanks everyone for helping,

Claudia

Leave a Reply