form validation with razor

Question

I have the following in my .net mvc razor form and I'm clicking on the submit button, but it's not being validated by the validation in the js. I debugged it in Firefox and instead, goes right to the form method and no validation comes out on the form to stop the form submission.

the HTML output of the model.LoanId is simply LoanId.

How can I properly validate the form????

What am I doing wrong?

HTML

        @using (Html.BeginForm("Refresh", "Home", FormMethod.Post, new { id = "frmTemps" })) 
    
                    
                    @Html.LabelFor(model => model.LoanId)
                    @Html.TextBoxFor(model => model.LoanId)
                    
                        
                    
                

js

$("#frmTemps").validate({
        event: "submit",
        rules: {
            LoanID: {
                required: true
            }
        },
        messages: {
            LoanID: {
                required: ' Please enter a Loan ID. '
            }
        }
    });

I also tried it with non-model data below and got the same thing.

    @Html.Label("loanid:", "LoanID")
                    @Html.TextBox("loanID")


Here is the html I'm trying to validate:
@Html.LabelFor(model => model.LoanType)
                    @Html.TextBox("SBA", "SBA")
                    @Html.ValidationMessageFor(model => model.LoanType)
                    @*@Html.TextBoxFor(model => model.LoanType)*@
                
                
                    Department:
                    @(Html.Kendo().DropDownListFor(model => model.SelectedDeptText)
                            .Name("ddlDept")
                            .DataTextField("DepartmentName")
                            .DataValueField("DepartmentID")
                            .Events(e => e.Change("Refresh"))
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetDepartments", "Home");
                                });
                            })
                    )
                    @Html.ValidationMessageFor(model => model.SelectedDeptText)

View Model

public class ViewModelTemplate_Guarantors
{
    public int SelectedTemplateId { get; set; }
    public IEnumerable Templates { get; set; }

    public int SelectedGuarantorId { get; set; }
    public IEnumerable Guarantors { get; set; }

    public string LoanId { get; set; }
    public string SelectedDeptText { get; set; }
    public string LoanType { get; set; }

    public bool ShowTemps { get; set; }
    public string Error { get; set; }
    public string ErrorT { get; set; }
    public string ErrorG { get; set; }
    public bool ShowGeneratePDFBtn { get; set; }
}

_Layout.cshtml

Validation class

namespace PDFService03Validation.Validations
{
    [MetadataType(typeof(PDFService03_Validation))]
    public partial class PDFService03
    {

}

    public partial class PDFService03_Validation
    {
        public class PDFService03
        {
            [Required(ErrorMessage = "Loan ID Required")]
            [DataType(DataType.Text)]
            public string LoanID { get; set; }

            [Required(ErrorMessage = "Loan Type Required")]
            [DataType(DataType.Text)]
            public string LoanType { get; set; }

            [Required(ErrorMessage = "Department Name Required")]
            [DataType(DataType.Text)]
            public string SelectedDeptText { get; set; }
        }
    }
}

Index method

public ActionResult Index(ViewModelTemplate_Guarantors model)
{
    ViewBag.Error = "";

    model.ShowGeneratePDFBtn = false;

    return View();
}

Index.cshtml - still thinks the object is not set. When debugging, I go into my Controller, sets the variable in the model, then, comes back here. Please help... I don't know what I'm doing incorrectly here. I think I've followed everything as needed.

Sorry to bug you again, but I'm almost there....

I did as you said, but still am not getting any validation errors....

Below, is the html markup that is produced by my View. You can see the scripts I'm using at the top and you can also see the validation in the span tags. What am I missing??? I'm also going to show you the ViewModel I edited. thanks so much ahead of time...

ViewModel

namespace PDFConverterModel.ViewModels
{
    [MetadataType(typeof(ViewModelTemplate_Guarantors_Validation))]
    public partial class ViewModelTemplate_GuarantorsValidation
    {

    }

    public partial class ViewModelTemplate_Guarantors_Validation
    {
        public class ViewModelTemplate_Guarantors
        {
            [Required(ErrorMessage = "Loan ID Required")]
            [DataType(DataType.Text)]
            public string LoanID { get; set; }

            [Required(ErrorMessage = "Loan Type Required")]
            [DataType(DataType.Text)]
            public string LoanType { get; set; }

            [Required(ErrorMessage = "Department Name Required")]
            [DataType(DataType.Text)]
            public string SelectedDeptText { get; set; }
        }
    }

    public class ViewModelTemplate_Guarantors
    {
        public int SelectedTemplateId { get; set; }
        public IEnumerable Templates { get; set; }

        public int SelectedGuarantorId { get; set; }
        public IEnumerable Guarantors { get; set; }

        public string LoanId { get; set; }
        public string SelectedDeptText { get; set; }
        public string LoanType { get; set; }

        public bool ShowTemps { get; set; }
        public string Error { get; set; }
        public string ErrorT { get; set; }
        public string ErrorG { get; set; }
        public bool ShowGeneratePDFBtn { get; set; }
    }
}

Page output:




    BHG :: PDF Generator
    
    
    
    
    
    
    
    
    
    
    



    
        
            
                BHG :: PDF Generator
            
        
        






    
        
            
                
            
        

            
                


                LoanId
                
                
                
                    
                
            
            
                LoanType
                    
                    

                
                
                    Department:

Leniel Maccaferri · Accepted Answer

Oh... I see why this is happening. You're forgetting this:

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

If you don't put the ValidationMessageFor, the unobtrusive validation won't know that this model property needs to be validated before the form submission.

So you must have this:

@Html.LabelFor(model => model.LoanId)
@Html.TextBoxFor(model => model.LoanId)
@Html.ValidationMessageFor(model => model.LoanId)

Don't forget to put some data annotation in your LoanId property first...

For more on this, look here: Validation with the Data Annotation Validators (C#)

EDIT

After you provided more code to the question I could see why the validation errors are not showing.

This happens because you're actually passing your custom ViewModel ViewModelTemplate_Guarantors to the view. As you can see, your view model has no data annotations. The data annotations you provided in the metadata class PDFService03_Validation will only take effect if you pass an object of type PDFService03 to the view. So to solve the problem you'll have to duplicate your data annotations in your ViewModelTemplate_Guarantors view model object. This is code repetition and is terrible ugly but is how it works.

form validation with razor

Answers (2)

Related Questions