0

I ran into a problem, and I hope you can help me solve it.

I have a form with several fields in it, few of them validated remotely. 

@using (Html.BeginForm("Action", "Controller", new { id = "myForm" }))
{
    @Html.AntiForgeryToken()    
        <table>
            <tr>
                <td width="225">Work permit/Registration card:</td>
                <td>Start date: @Html.EditorFor(m => m.WorkPermitStart)</td>
                <td width="50"></td> 
                <td>End date: @Html.EditorFor(m => m.WorkPermitEnd)</td> 
                <td>@Html.ValidationMessageFor(m => m.WorkPermitEnd)</td>
            </tr>
</table>
<li><button type="submit" value="submit" class="form-yes">submit</button></li>
}

piece of code like this works just fine, when WorkPermitEnd input loses focus the remote validation is done, and in case the fields are invalid, the message is shown in the following table cell as expected.

My problem is, I need to change it and put the validation message outside the form itself, in completely different section. And this is where I struggle to find a suitable solution, as when losing formcontext, the 

@Html.ValidationMessageFor(m => m.WorkPermitEnd)

just won't work and doesn't show the validation message for the input, that is in the original form. So my question is, is there some way to pass the validation message to different section on the page?

EDIT: added layout of the page

<section id="content">
    @RenderBody()
</section>

<aside id="messages">
    <aside id="validation">
        @RenderSection("ValidateMessage", required: false)
    </aside>
    <aside id="help">
        @RenderSection("Help", required: false)
    </aside>
</aside>
tereško
  • 58,060
  • 25
  • 98
  • 150
Tomáš Hnídek
  • 21
  • 2
  • Why does it have to be outside the form? Why don't you include that section of the page, where you want to put the validation message, in the form as well? – ataravati Aug 17 '14 at 14:40
  • I have added main layout to the original post. The form is in the view, that is rendered by RenderBody(), and the validation messages needs to go to section ValidateMessage. – Tomáš Hnídek Aug 17 '14 at 14:56

1 Answers1

0

Just off the top of my head, I think I would hide the for Html.ValidationMessageFor and then use jQuery/JavaScript to copy the contents of the to the location you need. The trick is to make sure the jQuery updates each time validation occurs which might require synchronizing each time a text box is changed.

CubeRoot
  • 552
  • 2
  • 13
  • I have been trying this as well, but I didn't find reasonable way to monitor changes on via javascript / jquery. Also tried to trigger it via focusout on WorkPermitEnd, but the focusout is processed prior the validation, so that leads to nowhere as well. – Tomáš Hnídek Aug 17 '14 at 15:00
  • I haven't tried this but sometimes changing the loading order of the JavaScript/jQuery libraries will affect the order that the methods fire. So maybe placing a JavaScript file before the unobtrusive JavaScript file might change the event order. The only other option I can think of is to disable unobtrusive validation, put the code into an Ajax form and have the validation done on the server side. Then the error messages could be copied after the form refreshes. – CubeRoot Aug 18 '14 at 15:46