Как сделать Recaptcha обязательным полем в MVC 3?

Question

В моей регистрационной форме есть рекапча. Пользователь должен ввести что-то в поле recaptcha, прежде чем оно будет опубликовано на сервере. У меня есть проверка на стороне сервера и проверка на стороне клиента для других полей.

Сгенерированный html из rcaptcha:

<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" autocomplete="off" class="valid">

Вид:

@ReCaptcha.GetHtml(theme: "red", publicKey: GetPublicKey())
@Html.ValidationMessageFor(m => m.recaptcha_response_field)

Модель:

[Required(ErrorMessage = "'captcha required' ")]
public string recaptcha_response_field { get; set; }

При загрузке я вижу сообщение «Требуется капча». Но если я что-то наберу, это все равно появится. Форма отправляется с пустым полем для повторного ввода.

Как я могу сделать обязательное поле recaptcha на стороне клиента?

Спасибо за помощь

EDIT: Я добавил это, чтобы перехватить событие отправки btn, но это не мешает опубликовать форму.

    <button type="submit" id="btnSubmit" class="sprt bg_red bt_red h25" onsubmit="ValidateAndSubmit();">Signup</button>
<script type="text/javascript">    
    function ValidateAndSubmit() {
            var v=$('#recaptcha_response_field').val();
            if (v == '' || v == undefined) {
                alert('captcha is required');
                return false;
            }
            return true;
        }
</script>

Answer 1

, чтобы заставить его работать при вводе, возвращать значение, а не просто вызывать его.Введите

onsubmit="return ValidateAndSubmit();"

или

onclick="return ValidateAndSubmit();"

Также вы можете попробовать добавить такую ​​же проверку в тег формы.

Answer 2

Хотя этот вопрос довольно старый, подумал, что он может помочь поделиться моим решением, которое поддерживает ненавязчивый JavaScript MVC.

if ($("#recaptcha_response_field").length > 0) {
  $("#recaptcha_response_field").attr("data-val", "true")
    .attr("data-val-required", "The captcha field is required.");
  $("<span />")
    .attr("data-valmsg-replace", "true")
    .attr("data-valmsg-for", "recaptcha_response_field")
    .addClass("field-validation-valid")
    .appendTo($("#recaptcha_response_field").parents(".editor-field"));
}