Unobtrusive jQuery unobtrusive validation not showing error spans
Question
I realise there are heaps of SO posts on this subject, and I have read and applied any suggestions I have seen in them where applicable, however nothing seems to work. I have been banging my head against this for a while now and just cannot see where the error is. I am hoping someone can point out what I cannot see.
I have the an MVC 5 application. The client side validation is working in that if I don't fill in what is needed the form will not post. However, the span tags to show the errors are not being generated upon error. Here is what I have:
web.config
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/bootstrap-3.3.5.min.css" rel="stylesheet"/>
<link href="/content/themes/jquery-ui-bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
</head>
<body>
<form action="/booking/process" id="idFrmBooking" method="post">
<input data-val="true" data-val-email="Enter a valid email address." data-val-required="Enter your email address." id="EmailAddress" name="EmailAddress" type="text" value="" />
</form>
<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
<script src="/js/bootstrap-3.3.5.min.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.unobtrusive-3.0.0.js" type="text/javascript"></script>
<script src="/scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="/scripts/jquery.inputmask/inputmask.js" type="text/javascript"></script>
<script src="/scripts/jquery.inputmask/jquery.inputmask.js" type="text/javascript"></script>
</html>
So as a simple test I type in either nothing or an invalid email address into the input field and get no error message. Anyone?
1 answers
solution1
0 ACCPTED
Your form does not contain the necessary <span> element that acts as the placeholder for the message generated by jQuery validation.
You need to include
@Html.ValidationMessageFor(m => m.EmailAddress)
which will output
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.