Показать сообщение для проверки JQuery с Ajax.BeginForm Asp.Net MVC - PullRequest
Новая
       18

Показать сообщение для проверки JQuery с Ajax.BeginForm Asp.Net MVC

0 голосов
/ 07 ноября 2018

Я протестировал jquery validate с помощью Ajax.BeginForm от asp.net mvc и, хотя форма проверяется, сообщение об ошибке не отображается, если форма недействительна .

КОД ФОРМЫ: 

@using (Ajax.BeginForm("Save", "Student", null,
    new AjaxOptions { HttpMethod = "POST", OnSuccess = "StudentSucess", OnFailure = "StudentFail", OnBegin = "validateForm", },
    new { id = "form-student" }))
{
    <div class="form-group">
        <input type="hidden" class="form-control" id="Id" name="Id" />
    </div>
    <div class="form-group">
        <label>TESTE</label>
        <select name="Test" required="" class="form-control">
            <option value="">Select</option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="Name" name="Name" placeholder="Name" autocomplete="off" required="" />
    </div>
    <div class="form-group m-t-10">
        <button type="submit" class="btn btn-theme">Create</button>
    </div>
}

КОД ФУНКЦИИ VALIDATE 

function validateForm() {
            var valid = $("#form-student").validate({
                rules: {
                    Name: {
                        required: true
                    },
                    Test: {
                        required: true
                    },
                },
                messages: {
                    Name: {
                        required: "Your name is required"
                    },
                    Test: {
                        required: "Test is required"
                    },
                }
            });

            return valid;
        }

ИЗОБРАЖЕНИЕ ВАЛИДАЦИИ enter image description here

Мне нужно сообщение соответствующего проверенного поля для отображения .

ВАЖНО : пользователь стека переполнения пометил тот же вопрос как дубликат, и вопрос, отличный от того, который, по его словам, был продублирован, не решает эту проблему. Я попробовал все варианты комментариев, но они не сработали для меня.

1 Ответ

0 голосов
/ 07 ноября 2018

У кода ОП есть две проблемы, которые я укажу отдельно.

1) Неправильная инициализация плагина jQuery Validation (на что указывает @Sparky в комментариях)

Рекомендуемое использование плагина jQuery Validation - вызывать функцию .validate после загрузки страницы, а не с помощью обработчика события onsubmit. 

<form id="myForm">
<input type="text" required="required">
</form>
<script>
$(document).ready(function() {
    $("#myform").validate();
});
</script>

См. https://jsfiddle.net/eky1rgjb/

Это решение, которое я лично рекомендовал бы.

2nd) Обработчик события «onsubmit» не сработает при сбое проверки HTML5.

Это более общее решение. Если вы хотите, чтобы ваша (пользовательская) проверка запускалась с обработчиком события onsubmit, вам нужно знать, что функция будет вызываться только в том случае, если нет проверок HTML5, препятствующих отправке. 

<b>This form WON'T fire the validation</b>
<form onsubmit='alert("validation")'>
    <input name="foo" type="text" required="">
    <br />
    <input type="submit" />
</form>
<b>This form WILL fire the validation, see the missing required=""</b>
<form onsubmit='alert("validation")'>
    <input name="foo" type="text">
    <br />
    <input type="submit" />
</form>

См. https://jsfiddle.net/0v253wz6/2/

...