Question

如果在模型表单中选择了无单选按钮，我需要显示一条错误消息。我正在将“价值观”输入单选表格，现在想显示一条消息，如果选择了否恢复，请“ 请先选择恢复”。

以下是“模型”表单的代码，其中显示了单选按钮：

<div class="modal fade" tabindex="-1" id="ResumeModal" role="dialog" ng-controller="topCtrl">
    <div class="modal-dialog modal-sm">
        <div class="modal-content ">
            @using (Html.BeginForm("ApplyJob", "PostedJob", FormMethod.Post))
            {
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                          x
                    </button>
                    <h4 class="modal-title">Choose Your Resume</h4>
                </div>
                <div class="modal-body">
                    <div class="row">

                        <div class="col-md-12">
                            <input type="hidden" name="PostedJobId" id="PostedJobById" value="@Model.PostedJobId" />
                            <input type="hidden" name="CreatedBy" id="CreatedBy" value="@Model.CreatedBy" />
                            @foreach (var item in NurseOneStop.WebSite.Models.ApplicationSession.CurrentUser.NurseResumeList)
                            {
                                <div class="col-md-12 lstCard">
                                    <input type="hidden" name="CheckedResumeId" id="CheckedResumeId" />
                                    <input type="radio" name="RBCheckedResume" style="height: 15px; width: 18px;" onchange="CheckedResume(@item.ResumeId)" /> <span>@item.ResumeName</span>
                                     </div>
                            }
                        </div>

                        <span style="color:Red">{{msg}}</span>

                        @*<label id="lblMessage" style="color:red"></label>*@

                    </div>
                </div>
                <div class="modal-footer">
                    <span style="color:Red">{{msg}}</span>
                <button id="btnSubmitResume" type="submit" class="btn btn-primary pull-right" ng-click="userAlertResumeSubmit()">
                        Submit
                </button>
                </div>
            }
        </div>
    </div>
</div>

下面是JavaScript的代码：

<script type="text/javascript">
    $(document).ready(function () {

        $("#btnShowModal").click(function (){
            $("#ResumeModal").modal('show');
        });
    });

    function CheckedResume(id) {
        $('#CheckedResumeId').val(id);
        console.log($('#CheckedResumeId').val());
    };



</script>

Answer 1

HTML元素的

ID属性应该是唯一的。在您共享的代码段中，将创建ID为'CheckedResumeId'的重复的隐藏表单元素，这将污染HTML DOM。您可以将元素移到foreach之外并检查代码。像下面

<input type="hidden" name="CheckedResumeId" id="CheckedResumeId" />
@foreach (var item in NurseOneStop.WebSite.Models.ApplicationSession.CurrentUser.NurseResumeList)
    {
        <div class="col-md-12 lstCard">
            <input type="radio" name="RBCheckedResume" style="height: 15px; width: 18px;" onchange="CheckedResume(@item.ResumeId)" /> 
            <span>@item.ResumeName</span>
        </div>
    }

在这里，JS会在执行onsubmit函数时检查是否单击了单选按钮。

if($('#CheckedResumeId').val().trim() == "") {
    //Give an error message to user saying that the radio button is not clicked.
}

Answer 2

这是我最近在网站上所做的事情。请注意，如果您尚未在网站上使用UIKit，则应将“ UIKit.notification”换成其他内容。

$('.btnSubmitResume').submit(function(e){


   if ($("input[name=RBCheckedResume]:checked").length === 0) {
    e.preventDefault();

    UIkit.notification({
        message: 'Please check at least one box to continue',
        status: 'primary',
        pos: 'top-right',
        timeout: 5000
    });
}

}）;

还请注意，您不应在for循环中使用ID，例如id =“ CheckedResumeId”。这将创建多个相同类型的ID，并给您带来麻烦。我建议将其更改为课程

如果未单击单选按钮，则在“提交”按钮上显示错误消息

2 个答案: