ASP.net MVC 非侵入式验证

Question

我在将输入发送到 Azure 逻辑应用程序之前验证表单时遇到问题。单击视图中的提交按钮时，表单内容将在未经验证的情况下提交。验证确实会触发，但无论是否有效，都会提交表单。有人可以帮忙吗？

型号...

    public class Contact
{
    [DisplayName("Name:")]
    [Required(ErrorMessage = "Please enter your name.")]
    public string Name { get; set; }

    [DisplayName("Email:")]
    [Required(ErrorMessage = "Please enter your email address.")]
    [RegularExpression(@"^\S+@\S+\.\S+$", ErrorMessage = "Please enter a valid email address.")]
    public string Email { get; set; }

    [DisplayName("Phone:")]
    [MaxLength(15)]
    [MinLength(8)]
    [RegularExpression(@"^[0-9]*$", ErrorMessage = "Phone number can only contain numbers.")]
    public string Phone { get; set; }

    [DisplayName("Message:")]
    [Required(ErrorMessage = "Please enter a message.")]
    public string Message { get; set; }

    [DisplayName("newsletterTextbox")]
    [Required(ErrorMessage = "Please enter your email address.")]
    [RegularExpression(@"^\S+@\S+\.\S+$", ErrorMessage = "Please enter a valid email address.")]
    public string newsletterTextbox { get; set; }
}

查看...

<div class="col-md-8 col-md-push-1">
            <!-- CONTACT FORM -->
            <div id="contactDiv" class="contact-form">
                <form id="contactForm">
                    <div class="form-group">
                        @Html.TextBoxFor(x => x.Name, new { placeholder = "Name", @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.Name, "", new { @style = "color: Orange" })
                    </div>
                    <div class="form-group">
                        @Html.TextBoxFor(x => x.Email, new { placeholder = "Email", @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.Email, "", new { @style = "color: Orange" })
                    </div>
                    <div class="form-group">
                        @Html.TextBoxFor(x => x.Phone, new { placeholder = "Phone", @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.TextBoxFor(x => x.Message, new { placeholder = "Message", @class = "form-control" })
                        @Html.ValidationMessageFor(x => x.Message, "", new { @style = "color: Orange" })
                    </div>
                    <button type="submit" id="submit" onclick="contactSubmit()" name="submit" class="btn btn-primary btn-lg text-center float-right">Submit your message</button>
                </form>
            </div>
            <!-- / CONTACT FORM -->
        </div>

js...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/superagent/2.2.0/superagent.min.js"></script>

@Scripts.Render("~/bundles/jquery");
@Scripts.Render("~/bundles/jqueryval");

<script type="text/javascript">
$(document).ready(function () {
    var frm = $("#contactForm");
    frm.validate();
});

function contactSubmit() {
    var f = $("#contactForm");
    if (f.valid()) {
        superagent
            .post(*** Azure Logic App URL ***)
            .send({
                name: document.getElementById('Name').value,
                email: document.getElementById('Email').value,
                phone: document.getElementById('Phone').value,
                message: document.getElementById('Message').value
            })
            .end(function (err, res) {
                if (err || !res.ok) {
                    alert('Whoops. Something went wrong.');
                } else {
                    var div = document.getElementById('contactDiv');
                    var successText = document.getElementById('contactText');
                    div.style.display = "none";
                    successText.Text = "Thanks! We'll be in touch";
                    successText.innerHTML = "Thanks! We'll be in touch";
                    successText.value = "Thanks! We'll be in touch";
                }
            });
        return false;
    }

    else {
        return false;
    }

}
</script>

Answer 1

用

包裹你的表格

@using (Ajax.BeginForm("ActionName", new { Controller = "ControllerName", area = "" }, new AjaxOptions() { OnSuccess = "onSuccessFunction", HttpMethod = "POST", UpdateTargetId = "idtobeupdated"}, new { id = "idofform" }))

并且不要使用 javascript / jquery。

为此您需要安装 Microsoft.jQuery.Unobtrusive.Validation 和 *.Ajax。

ASP.net MVC 非侵入式验证

ASP.net MVC Unobtrusive Validation

asp.net-mvc

unobtrusive-validation