0

I want to implement server and client side validation in modal partial view but this validation is not working even If submit the textbox and Link blank. I have included bundle into my main view under @section scripts{. Currently, when i click on Save, it saves the modal data even though the fields are empty.

Modal

    [Required(ErrorMessage ="Please enter Title")]
    public string Title { get; set; }
   [Required(ErrorMessage = "Please enter valid URL link!")]
    [Url(ErrorMessage ="Please enter valid URL link!")]
    public string Link { get; set; }

Modal partial View

Note the form is loaded using ajax

<div class="modal fade" id="EditModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-body">
                @using (Html.BeginForm("_pEdit", "Home", FormMethod.Post, new { Id = "Editform"}))
                {
                    <div class="form-group">
                        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.Link, htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.Link, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Link, "", new { @class = "text-danger" })
                    </div>
                }

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="submit-modal" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Script

 $(document).on("click", '.LinkId', function (e) {
        $(this).load(actionURL, function (html) {
            // Reparse the validator
            var form = $('form');
            form.data('validator', null);
            $.validator.unobtrusive.parse(form);
            $.ajax({
                url: $(this).data("url"),
                type: "GET",
                success: function (response) {
                    if (response) {
                        $('#EditModal').replaceWith(response);
                        $('#EditModal').modal('show');                            
                    }
                    else {
                        var message = response.message;
                        alert(message);
                    }
                }
            });
            return false;
        })
        });
MVC
  • 649
  • 7
  • 23
  • Is the modal being loaded dynamically (e.g. using ajax after the initial page is loaded)? –  Aug 02 '18 at 10:10
  • @StephenMuecke, Yes it loads dynamically. – MVC Aug 02 '18 at 10:19
  • @StephenMuecke, Shall I include those code into my this script `$(document).on('click', '#submit-modal', function (e) {`? – MVC Aug 02 '18 at 10:27
  • No, You need to include the code to reparse the validator in the script that adds that partial to the view –  Aug 02 '18 at 10:30
  • @StephenMuecke, can you please have a look? I have updated the relevant script. – MVC Aug 02 '18 at 10:38
  • Why are you making 2 ajax calls? - that makes no sense. You are using `.load()` to call a method but you never do anything with the data that is returned, and then in its success callback, you then make another ajax call and update the DOM –  Aug 02 '18 at 10:42
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/177272/discussion-between-stephen-muecke-and-mvc). –  Aug 02 '18 at 10:42

0 Answers0