如何使用jQuery Unobtrusive Validation正確驗證表單？

Question

我正在嘗試在表單中使用jquery非侵入式驗證，並且無論html輸入是否為空，只要打開頁面，驗證消息就會一直顯示。 HTML在車把模板中。 加載頁面時，我正在使用HttpPost檢索數據。

我的觀點：

    <form id="submitForm" class="form">
        <section id="conferenceContainer"></section>
        <div id="saveBtnContainer">
            <input type="submit" id="saveBtn" class="btn" value="Submit" />
            <div id="lblCheckContainer">
                <label id="lblCheck"></label>
            </div>
        </div>
    </form>

    <script type="text/x-handlebars-template" id="conferenceTemplate">
    <div id="newConference">
        <div class="form-group row">
            @Html.LabelFor(x => x.ConferenceTitle,
                                new { @class="confLabels" })
            @Html.TextBoxFor(x => x.ConferenceTitle,
                                  new { @id="confTitle", @class="form-control", @Value= "{{ConferenceTitle}}" })
            @Html.ValidationMessageFor(x => x.ConferenceTitle, "*Enter a conference title*", new { @class="text-danger" })
        </div>
        <div class="form-group row">
            @Html.LabelFor(x => x.EventDate,
                                new { @class="confLabels" })
            @Html.TextBoxFor(x => x.EventDate,
                                   new { @id="confDate", @class="form-control", @Value="{{formatDate EventDate}}" })
            @Html.ValidationMessageFor(x => x.EventDate, "*Enter the date of the conference*", new { @class="text-danger" })
        </div>
        <div class="form-group row">
            @Html.LabelFor(x => x.RegFullPrice,
                                new { @class="confLabels" })
            @Html.TextBoxFor(x => x.RegFullPrice,
                                   new { @id="confPrice", @class="form-control", @Value="{{RegFullPrice}}" })
            @Html.ValidationMessageFor(x => x.RegFullPrice, "*Enter the price to register for conference*", new { @class="text-danger" })
        </div>
        <div class="form-group row">
            @Html.LabelFor(x => x.PreRegEndDate,
                                new { @class="confLabels" })
            @Html.TextBoxFor(x => x.PreRegEndDate,
                                   new { @id= "confPreRegDate", @class="form-control", @Value= "{{formatDate PreRegEndDate}}" })
            @Html.ValidationMessageFor(x => x.PreRegEndDate, "*Enter the last day to pre-register for conference*", new { @class="text-danger" })
        </div>
        <div class="form-group row">
            @Html.LabelFor(x => x.PreRegDiscount,
                                new { @class="confLabels" })
            @Html.TextBoxFor(x => x.PreRegDiscount,
                                   new { @id= "confPreRegDiscount", @class="form-control", @Value= "{{PreRegDiscount}}" })
            @Html.ValidationMessageFor(x => x.PreRegDiscount, "*Enter the discount for pre-registration*", new { @class = "text-danger" })
        </div>
    </div>
</script>

我正在處理.ready函數中的Submit輸入，其中'saveData（）'是使用ajax調用的方法。

<script type="text/javascript">
    var setup = new ConferenceSetup();

    $(document).ready(function () {
        setup.GetData();

        $('#submitForm').submit(function () {
            var confirmSave = confirm("Are you finished editing the Conference?");

            if (confirmSave) {
                setup.SaveData();
                event.preventDefault();
            } else {
                event.preventDefault();
            }
        });
    });
</script>

似乎我已經在服務器端進行驗證，但是無法讓客戶端按照我的意願進行操作。

我的模特：

    [DisplayName("Conference Title")]
    [Required]
    public string ConferenceTitle { get; set; }

    [DisplayName("Event Date")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd", ApplyFormatInEditMode = true)]
    [Required]
    public DateTime EventDate { get; set; }

    [DisplayName("Registration Price")]
    [Range(0, 999.99, ErrorMessage = "Price must be between $0 and $1,000")]
    [Required]
    public decimal RegFullPrice { get; set; }

    [DisplayName("Pre-Registration End Date")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd", ApplyFormatInEditMode = true)]
    [Required]
    public DateTime PreRegEndDate { get; set; }

    [DisplayName("Pre-Registration Discount")]
    [Range(0, 999.99, ErrorMessage = "Discount must be between $0 and $1,000")]
    [Required]
    public decimal PreRegDiscount { get; set; }

我的控制器：

[Authorize]
public class ConfSetupController : Controller
{
    public ActionResult NewConf()
    {
        ConferenceModel model = new ConferenceModel();

        return View(model);
    }

這是我的頁面的樣子，驗證消息永不消失

任何幫助或建議，不勝感激！

Answer 1

要隱藏頁面加載時的驗證，請檢查是否將.field-validation-error和.validation-summary-valid CSS類“ display”屬性設置為“ none”。