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。