Проверка нокаута для пустого поля не работает при нажатии кнопки - PullRequest
Новая
       27

Проверка нокаута для пустого поля не работает при нажатии кнопки

0 голосов
/ 10 октября 2018

У меня есть простая форма, в которой есть электронная почта и флажок, который проверяется нокаутом, используя нижеприведенную форму кода только флажок проверки, но поля электронной почты, если он оставлен пустым.Используя метод Extend, он проверяет электронную почту только тогда, когда мы щелкаем внутри поля электронной почты. Скажем, когда страница загружается и я скрываю кнопку сохранения, тогда нокаут только проверяет флажок и выдает сообщение «Пожалуйста, примите T & C», и когда я проверяю это поле, я могу сохранить данныес вводом адреса электронной почты ..

Как проверить поля электронной почты при нажатии кнопки также 

SubscribeVm = {
    IAgree: ko.observable(false),
   // Email: ko.observable(),
     Email: ko.observable().extend({ required: true, email: true }),

    //Email: ko.observable().extend({
    //    // custom message
    //    required: {
    //        message: 'Please supply your email address.'
    //    }
    //}),
    Message: ko.observable(''),
    ShowForm: ko.observable(true),
    postSubscribe: function () {
        if (!SubscribeVm.IAgree()) {
            SubscribeVm.Message("Please accept T&C");
            return;
        }
        if (SubscribeVm.Email == '') {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }
        $.ajax({
            url: baseURL + 'ajax/PostSubscription',
            type: 'POST',
            data: { "Email": SubscribeVm.Email, "IAgree": SubscribeVm.IAgree },
            dataType: 'json',
            success: function (data) {
                if (data.Message == "0") {
                    SubscribeVm.Message("Email value Missing");
                } else if (data.Message == "1") {
                    SubscribeVm.Message("Successfully subscribed");
                } else if (data.Message == "-1") {
                    SubscribeVm.Message("Email Already subscribed");
                   // SubscribeVm.Message
                }
                SubscribeVm.ShowForm(false);

            }
        });
    }
};

HTML

Подписаться на рассылку новостей 

                <div class="text-left ">
                    <div class="media p offset-top-12 offset-lg-top-32">
                        <div class="media-left">
                            <input data-bind="value: $root.Email" type="email" class="form-control" name="Email" placeholder="Your email here" required />
                        </div>
                    </div>
                    <div class="media p offset-top-12 offset-lg-top-32">
                        <div class="media-left">
                            <input data-bind="checked: $root.IAgree" type="checkbox" name="IAgree" value="false" />
                        </div>
                        <div class="media-body"><a href="#" class="text-white">Yes, I agree to receive Newsletter </a></div>
                    </div>
                    <div class="media p offset-top-12 offset-lg-top-32">
                        <div class="media-left"><button data-bind="click: $root.postSubscribe" type="button" class="btn btn-info" style="font-weight:100" id="submitsubscribe">SUBSCRIBE</button></div>
                    </div>
                    <div class="media-body text-white" data-bind="text: Message">


                    </div>
                </div>

            </form>
        </div>

Мне почему-то следующий код не работает 

if (SubscribeVm.Email == '') {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Поставьте что-то вроде этого после того, как вы проверите состояние флажка и перед вызовом $ .ajax. 

var v = ko.validatedObservable(SubscribeVm.Email());
var valid = v.isValid();
if (!valid) {
    // v.errors.showAllMessages(); // Default error message
    SubscribeVm.Message("Please provide a valid Email.");
    return;
}

Таким образом, вы будете использовать платформу проверки нокаута.

Youпотребуется изменить эту строку:

data: { "Email": SubscribeVm.Email, "IAgree": SubscribeVm.IAgree },

на

data: { "Email": SubscribeVm.Email(), "IAgree": SubscribeVm.IAgree() },

, чтобы вы получили базовые значения, а не сами функции выбивки.

Надеюсь, это работает для вас.

0 голосов
/ 10 октября 2018

Первое, что нужно отметить, это то, что электронная почта является наблюдаемой, поэтому вы должны сделать следующее: 

if (SubscribeVm.Email() == '') {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }

Второе, что нужно отметить, это то, что вы не используете библиотеку валидации правильно, так как вышеупомянутая проверка должна быть сделаначерез нокаут-подтверждение.Поиск для validatedObservable и его isValid.

То, что вы ищете, будет выглядеть так: 

if (!SubscribeVm.Email.isValid()) {
            SubscribeVm.Message("Please provide a valid Email.");
            return;
        }
...