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函数中的提交输入，其中'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”。

如何使用jQuery Unobtrusive Validation正确验证表单？

1 个答案: