Problem with client side validation

Feb 26, 2010 at 8:39 PM

Hi,

I'm using xVal with NHibernate.Validator. When I submit my form I don't get any client side validation. Also, error messages from the server side validation only shows in the ValidationSummery() and not in the ValidationMessage(). I wonder if it could be something to do with NHibernate.Validator.

I've tried everything I know without success and I hope somebody can help me.

Here is the code:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="MvcContrib.FluentHtml.ModelViewPage<LogOnPageViewModel>" %>
<%@ Import Namespace="Gigabuyit.Web.Controllers.Account.ViewModels"%>
<%@ Import Namespace="Gigabuyit.Web.Controllers.Account"%>
<%@ Import Namespace="Gigabuyit.Web.Controllers" %>

<asp:Content ID="loginHead" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
    <title><%= Html.LocalizedText("LogOn") %></title>
</asp:Content>

<asp:Content ID="loginContent" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <h2><%= Html.LocalizedText("LogOn") %></h2>
    <p>
        <%= string.Format(Html.LocalizedText("EnterUsernameAndPassword"), Html.ActionLink<AccountController>(x => x.Register(), Html.LocalizedText("Register")))%>
    </p>

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm<AccountController>(x => x.LogOn())) { %>
        <%= Html.AntiForgeryToken() %>
        <div>
            <fieldset>
                <legend><%= Html.LocalizedText("AccountInfo") %></legend>
                <p>
                    <%= this.TextBox(x => x.Username).Label(Html.LocalizedText("Username")) %>
                    <%= this.ValidationMessage(x => x.Username) %>
                </p>
                <p>
                    <%= this.Password(x => x.Password).Label(Html.LocalizedText("Password"))%>
                    <%= this.ValidationMessage(x => x.Password) %>
                </p>
                <p>
                    <%= this.CheckBox(x => x.RememberMe)%>
                    <%= Html.LocalizedLabel("RememberMe", "RememberMe", new { @class = "inline"})%>
                </p>
                <p>
                    <%= this.SubmitButton(Html.LocalizedText("LogOn")) %>
                </p>
            </fieldset>
        </div>

    <% } %>

    <%= Html.ClientSideValidation<LogOnFormViewModel>("logOn") %>
</asp:Content>

 

using NHibernate.Validator.Constraints;

namespace Gigabuyit.Web.Controllers.Account.ViewModels
{
    public class LogOnFormViewModel
    {
        [NotNullNotEmpty(Message = "*")]
        [Pattern(@"^([0-9a-zA-Z]{1}([-_.\w]*[0-9a-zA-Z]+)){5,20}", Message = "{UserNameValidation}")]
        public string Username { get; set; }

        [NotNullNotEmpty(Message = "*")]
        public string Password { get; set; }

        public bool RememberMe { get; set; }

        public string ReturnUrl { get; set; }
    }
}

 

This is the HTML output in the browser when I've submitted the form:

    <ul class="validation-summary-errors"><li>may not be null or empty</li>
<li>The username contains invalid characters</li>
<li>may not be null or empty</li>
</ul>

<form action="/account/logon" method="post"><input name="__RequestVerificationToken" type="hidden" value="k9cbON3BErzvwEjOmPwdAbKmxX9XTlKGkYBdaEmo91P7VOMO/fmLSJVXLRZoTAY2" />
<div>
<fieldset>
<legend>Inloggningsinformation</legend>
<p>
<label for="Username" id="Username_Label">Anv&#228;ndarnamn</label><input id="Username" name="Username" type="text" value="" />
                    
</p>
<p>
<label for="Password" id="Password_Label">L&#246;senord</label><input id="Password" name="Password" type="password" value="" />

</p>
<p>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input id="RememberMe_Hidden" name="RememberMe" type="hidden" value="false" />
<label class="inline" for="RememberMe">Kom ih&#229;g mig?</label>
                </p>
<p>
<input id="Logga_in" name="Logga_in" type="submit" value="Logga in" />
</p>
</fieldset>
</div>

</form><script type="text/javascript">xVal.AttachValidator("logOn", {"Fields":[{"FieldName":"Username","FieldRules":[{"RuleName":"RegEx","RuleParameters":{"Pattern":"^([0-9a-zA-Z]{1}([-_.\\w]*[0-9a-zA-Z]+)){5,20}"},"Message":"{UserNameValidation}"},{"RuleName":"Required","RuleParameters":{},"Message":"*"}]},{"FieldName":"Password","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"*"}]}]}, {})</script>


I would be very glad for any help I can get!

Thanks
/Ingo
Feb 26, 2010 at 8:44 PM

Sorry, I saw that I made a misstake in the code above. It should not be:

<%= Html.ClientSideValidation<LogOnFormViewModel>("logOn") %>

but

<%= Html.ClientSideValidation<LogOnFormViewModel>() %>

Then the HTML output looks like this:

    <ul class="validation-summary-errors"><li>may not be null or empty</li>
<li>Anv&#228;ndarnamnet m&#229;ste vara vara 4-20 tecken och kan bara inneh&#229;lla bokst&#228;ver, siffror, punkter (.), bindestreck (-) och understreck (_).</li>
<li>may not be null or empty</li>
</ul>

<form action="/account/logon" method="post"><input name="__RequestVerificationToken" type="hidden" value="k9cbON3BErzvwEjOmPwdAbKmxX9XTlKGkYBdaEmo91P7VOMO/fmLSJVXLRZoTAY2" />
<div>
<fieldset>
<legend>Inloggningsinformation</legend>
<p>
<label for="Username" id="Username_Label">Anv&#228;ndarnamn</label><input id="Username" name="Username" type="text" value="" />
                    
</p>
<p>
<label for="Password" id="Password_Label">L&#246;senord</label><input id="Password" name="Password" type="password" value="" />

</p>
<p>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input id="RememberMe_Hidden" name="RememberMe" type="hidden" value="false" />
<label class="inline" for="RememberMe">Kom ih&#229;g mig?</label>
                </p>
<p>
<input id="Logga_in" name="Logga_in" type="submit" value="Logga in" />
</p>
</fieldset>
</div>

</form><script type="text/javascript">xVal.AttachValidator(null, {"Fields":[{"FieldName":"Username","FieldRules":[{"RuleName":"RegEx","RuleParameters":{"Pattern":"^([0-9a-zA-Z]{1}([-_.\\w]*[0-9a-zA-Z]+)){5,20}"},"Message":"{UserNameValidation}"},{"RuleName":"Required","RuleParameters":{},"Message":"*"}]},{"FieldName":"Password","FieldRules":[{"RuleName":"Required","RuleParameters":{},"Message":"*"}]}]}, {})</script>

/Ingo