Показывать сообщение об ошибке на кнопке «Отправить», если переключатель не нажат

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

Так я недавно сделал на сайте. Обратите внимание, что вам следует заменить «UIKit.notification» на что-то другое, если вы еще не используете UIKit на веб-сайте.

$('.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 = "CheckedResumeId". Это создаст несколько идентификаторов одного типа и вызовет проблемы для вас. Я бы посоветовал изменить это на класс

Answer 2

Атрибут ID для элемента HTML должен быть уникальным. В предоставленном вами фрагменте кода будут созданы дубликаты скрытых элементов формы с идентификатором «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, чтобы проверить, нажата ли кнопка-переключатель при выполнении функции отправки.

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