validation for url in mvc

2 posts, 0 answers
  1. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 16 Jan 2018 Link to this post

    Hi I'm using the data annotation [Url] but kendo validator does not display the error and submit the form also the url is not valid.

    what can I do?

    here is my code:

    this is my model:

     public class NewProject
        {
            public int ID { get; set; }

            [Required(ErrorMessage = "Please select a product")]
            [Display(Name = "Product Name")]
            public int? ProductID { get; set; }

            [Display(Name = "Name")]
            [Required(ErrorMessage = "Please enter name")]
            public string Name { get; set; }

            [Required(ErrorMessage = "Please select leader")]
            [Display(Name = "Leader")]
            public int? LeaderID { get; set; }

            public string LeaderName { get; set; }

            [Required(ErrorMessage = "Please select code reviewer")]
            [Display(Name = "Code Reviewer")]
            public int? CodeReviewerID { get; set; }
            public string CodeReviewerName { get; set; }

            public DateTime? ActualStartDate { get; set; }

            public DateTime? ActualEndDate { get; set; }

            [Required(ErrorMessage = "Please select a date")]
            [DataType(DataType.Date)]
            [UIHint("DatePickerEditor")]
            [Display(Name = "Estimated Start Date")]
            public DateTime? EstimatedStartDate { get; set; }

            [Required(ErrorMessage = "Please select a date")]
            [GreaterDate(EarlierDateField = "EstimatedStartDate", ErrorMessage = "End date should be after Start date")]
            [DataType(DataType.Date)]
            [UIHint("DatePickerEditor")]
            [Display(Name = "Estimate End Date")]
            public DateTime? EstimatedEndDate { get; set; }

            [UIHint("PercentCompletedEditor")]
            public int? PercentCompleted { get; set; }

            [DataType(DataType.Url, ErrorMessage = "The Git url is not valid")]

            [Url(ErrorMessage = "The Git url is not valid")]
            [Display(Name = "Git Url")]
            [Required(ErrorMessage = "Please enter an url")]
            public string GitUrl { get; set; }

            [Required(ErrorMessage = "Please enter comment")]
            [Display(Name = "Comment")]
            public string Comment { get; set; }
           
            private List<ProjectManager> m_Managers;
            public List<ProjectManager> Managers
            {
                get
                {
                    if (m_Managers == null)
                    {
                        m_Managers = new List<ProjectManager>();
                        if (CodeReviewerID != null)
                            m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int) CodeReviewerID, RoleId = RoleEnum.CodeReviewer });
                        if (LeaderID != null)
                            m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int) LeaderID, RoleId = RoleEnum.Leader });
                    }
                    return m_Managers;

                }
                set
                {
                    m_Managers = new List<ProjectManager>();
                    if (CodeReviewerID != null)
                        m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int) CodeReviewerID, RoleId = RoleEnum.CodeReviewer });
                    if (LeaderID != null)
                        m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int) LeaderID, RoleId = RoleEnum.Leader });
                }
            }

            public List<Product> Products { get; set; }
            public List<Developer> Developers { get; set; }
        }

     

    my view:

    @using (Ajax.BeginForm("SaveNewProject", "Project", new AjaxOptions { OnSuccess = "onProjectSuccess" }, new { id = "projectForm" }))
    {
        <div class="form-horizontal" id="tempPage" style="margin-top:20px">

            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            @Html.HiddenFor(model => model.ProductID)
            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-6 col-sm-6">
                    @Html.Kendo().TextBoxFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })

                </div>
            </div>

            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.CodeReviewerID, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-6 col-sm-6">
                    @(Html.Kendo().DropDownListFor(model => model.CodeReviewerID)
                .Name("CodeReviewerID")
                .HtmlAttributes(new { style = "width:220px;" })
                .OptionLabel("Select Code Reviewer...")
                .DataValueField("ID")
                .DataTextField("Name")
                .BindTo(Model.Developers))
                    @Html.ValidationMessageFor(model => model.CodeReviewerID, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.LeaderID, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-6 col-sm-6">
                    @(Html.Kendo().DropDownListFor(model => model.LeaderID)
                .Name("LeaderID")
                .HtmlAttributes(new { style = "width:220px;" })
                .OptionLabel("Select Leader...")
                .DataValueField("ID")
                .DataTextField("Name")
                .BindTo(Model.Developers))
                    @Html.ValidationMessageFor(model => model.LeaderID, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.EstimatedStartDate, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-6 col-sm-6">
                    @(Html.Kendo().DatePickerFor(model => model.EstimatedStartDate)
                               .Name("EstimatedStartDate")
                               .Format("MM/dd/yyyy")
                               .Value(DateTime.Now)
                               .Events(e => e.Change("startChangeEstimated").Open("startEstimatedOpen")))
                    @Html.ValidationMessageFor(model => model.EstimatedStartDate, "", new { @class = "text-danger" })

                </div>
            </div>

            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.EstimatedEndDate, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-6 col-sm-6">
                    @(Html.Kendo().DatePickerFor(model => model.EstimatedEndDate)
                               .Name("EstimatedEndDate")
                               .Format("MM/dd/yyyy")
                               .Value(DateTime.Now)
                               .Events(e => e.Change("endChangeEstimated").Open("endEstimatedOpen")))
                    @Html.ValidationMessageFor(model => model.EstimatedEndDate, "", new { @class = "text-danger" })

                </div>
            </div>

            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.GitUrl, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-6 col-sm-6">
                    @Html.Kendo().TextBoxFor(model => model.GitUrl)
                    @Html.ValidationMessageFor(model => model.GitUrl, "", new { @class = "text-danger" })

                </div>
            </div>

            <div class="form-group" id="tempPage">
                @Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })

                <div class="col-md-7 col-sm-7">
                    @Html.TextAreaFor(model => model.Comment, 11, 40, new { @class = "k-textbox" })
                    @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
                </div>
            </div>



            <div class="container-fluid" style="padding-top:10px">
                <hr id="newProjectHR" />
            </div>
            <div id="buttonPanel">
                <input type="submit" value="save" class="k-button" id="btn_save_project" />
            </div>
        </div>

    }

     

     

    my kendo validator:

    $(function () {
        $("#projectForm").kendoValidator({
            rules: {
                greaterdate: function (input) {
                    if (input.is("[data-val-greaterdate]") && input.val() != "") {
                        var date = kendo.parseDate(input.val()),
                            earlierDate = kendo.parseDate($("[name='" + input.attr("data-val-greaterdate-earlierdate") + "']").val());
                        return !date || !earlierDate || earlierDate.getTime() < date.getTime()+1;
                    }

                    return true;
                }
            },
            messages: {
                greaterdate: function (input) {
                    return input.attr("data-val-greaterdate");
                }
            }
        });
    });

    thank you!

  2. Stefan
    Admin
    Stefan avatar
    2475 posts

    Posted 18 Jan 2018 Link to this post

    Hello, Michael,

    Thank you for the provided code.

    After inspecting it I noticed that the Kendo UI Validator has a rule only for the "greaterdate" validation. After I added a rule for the "URL" column the message was shown:

    $(function () {
        $("#ticketsForm").kendoValidator({
            rules: {
                url: function (input) {
                    if (input.is("[data-val-url]") && input.val() != "") {
                        console.log(input.val())
                        return false // Add validation logic
                    }
     
                    return true;
                }
            },
            messages: {
                greaterdate: function (input) {
                    return input.attr("data-val-url");
                }
            }
        });
    });



    Let me know if you need additional assistance on this matter.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top