formElement is null with Mvc Client Validation

Question

I'm getting a "formElement is null" when trying to use MVC Client Validation. Does anyone have any thoughts as to what could be the issue?

Sys.Mvc.NumberValidator.create=function(rule){return Function.createDelegate(new Sys.Mvc.NumberValidator(),new Sys.Mvc.NumberValidator().validate);}

Here is my model:

public class EmailViewModel
    {
        /// 
        /// The user's current email address
        /// 
        public string CurrentEmailAddress { get; set; }

        /// 
        /// User's new email address
        /// 
        [EmailAddress( IsRequired = true, ErrorMessage = "Please enter a valid email address." )]
        public string NewEmailAddress { get; set; }

        /// 
        /// User's confirmed new email address
        /// 
        [EmailAddress( IsRequired = true, ErrorMessage = "Please enter a valid email address. Your emails do not match." )]
        public string ConfirmNewEmailAddress { get; set; }

        public EmailViewModel()
        {
            CurrentEmailAddress = "[email protected]";
            NewEmailAddress = string.Empty;
            ConfirmNewEmailAddress = string.Empty;
        }
    }

And here are the script references from the master page:

MicrosoftAjax.js
MicrosoftMvcAjax.js
MicrosoftMvcValidation.js

I'm not sure if all of this will show up but here is the view code:

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

<%= Html.ValidationSummary( true, "There was an error when processing your request" ) %>
<% Html.EnableClientValidation(); %>
<% Html.BeginForm(); %>
    <div class="SecureForm_Wrapper">
        <label class="Styled">
            <img alt="Reqired" src="../../Content/Images/Misc/required.png" />
            New E-Mail</label>
        <div class="TheField">
            <%= Html.TextBoxFor( m => m.NewEmailAddress, new { id = "NewEmailAddress", name = "NewEmailAddress", @class = "CommonTextBox" } ) %>
            <%= Html.ValidationMessageFor( m => m.NewEmailAddress ) %>
        </div>
    </div>
    <div class="SecureForm_Wrapper">
        <label class="Styled">
            <img alt="Reqired" src="../../Content/Images/Misc/required.png" />
            Confirm New E-Mail</label>
        <div class="TheField">
            <%= Html.TextBoxFor( m => m.ConfirmNewEmailAddress, new { id = "ConfirmNewEmailAddress", name = "ConfirmNewEmailAddress", @class = "CommonTextBox" } )%>
            <%= Html.ValidationMessageFor( m => m.ConfirmNewEmailAddress ) %>
        </div>
    </div>
    <div id="BottomButtonContainer">
        <a class="button" href="#" id="SubmitButton" style="font-weight: bold;"><span>Save</span></a>
        <a class="button" href="#" onclick="this.blur(); return false;"><span>Cancel</span>
        </a>
    </div>
    <% Html.EndForm(); %>

And here is

Does anyone have any thoughts as to what could be the issue?

Answer 1

When I change your view model to use Required attributes (and remove the IsRequired properties), your view model and view seem to validate fine for me. I also had to add a submit button to your form. Maybe the problem is in your implementation of the EmailAddress validator?

You might want to be more careful with the formatting of your question, as it makes it a bit hard to parse. For reference, here is the view model and cleaned up view I am using that works.

View Model:

public class EmailViewModel
{
    /// 
    /// The user's current email address
    /// 
    public string CurrentEmailAddress { get; set; }

    /// 
    /// User's new email address
    /// 
    [Required(ErrorMessage = "Please enter a valid email address.")]
    public string NewEmailAddress { get; set; }

    /// 
    /// User's confirmed new email address
    /// 
    [Required(ErrorMessage = "Please enter a valid email address. Your emails do not match.")]
    public string ConfirmNewEmailAddress { get; set; }

    public EmailViewModel()
    {
        CurrentEmailAddress = "[email protected]";
        NewEmailAddress = string.Empty;
        ConfirmNewEmailAddress = string.Empty;
    }
}

View:

<%= Html.ValidationSummary( true, "There was an error when processing your request" ) %>
<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm())
   { %> 

    New E-Mail 
    <%= Html.TextBoxFor(m => m.NewEmailAddress)%> 
    <%= Html.ValidationMessageFor(m => m.NewEmailAddress)%> 
    <br />

    Confirm New E-Mail 
    <%= Html.TextBoxFor(m => m.ConfirmNewEmailAddress)%> 
    <%= Html.ValidationMessageFor(m => m.ConfirmNewEmailAddress)%> 
    <br />

    <input type="submit" value="Submit" />

<% } %>

<script src="<%= ResolveUrl("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript" language="javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript" language="javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript" language="javascript"></script>