Как бы я динамически очистить ошибку формы, пока пользователь печатает

Question

Как бы я динамически очистить ошибку формы, пока пользователь печатает

0

У меня есть контактная форма, использующая AJAX.

В настоящее время, когда пользователь изначально не вводит информацию ни в одно из обязательных полей, появляется сообщение об ошибке. Чтобы очистить это сообщение об ошибке, пользователь должен нажать кнопку "отправить".

То, что я пытаюсь сделать, это следующее: если пользователь не вводит какую-либо информацию для какого-либо обязательного поля, но затем начинает вводить и отвечает требованиям этого поля, сообщение об ошибке должно очищаться автоматически, вместо того, чтобы снова нажимать кнопку "отправить" чтобы сообщение об ошибке исчезло.

Вот мой код:

$(document).ready(function() {
    $('form #response').hide();


    $('.button').click(function(e) {

        e.preventDefault();

        var valid = '';
        var required = ' is required.';
        var first = $('form #first').val();
        var last = $('form #last').val();
        var email = $('form #email').val();
        var message = $('form #message').val();
        var tempt = $('form #tempt').val();
        var tempt2 = $('form #tempt2').val();

        if (first = '' || first.length <= 1) {
            valid += '<p>Your first name' + required + '</p>';
        }

        if (last = '' || last.length <= 1) {
            valid += '<p>Your last name' + required + '</p>';
        }

        if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
            valid += '<p>Your email address' + required + '</p>';
        }

        if (message = '' || message.length <= 4) {
            valid += '<p>A message' + required + '</p>';
        }

        if (tempt != 'http://') {
            valid += '<p>We can\'t allow spam bots.</p>';
        }

        if (tempt2 != '') {
            valid += '<p>A human user' + required + '</p>';
        }

        if (valid != '') {
            $('form #response').removeClass().addClass('error')
                .html('' +valid).fadeIn('fast');
        }

        else {
            $('form #response').removeClass().addClass('processing').html('Sending...').fadeIn('fast');

            var formData = $('form').serialize();
            submitForm(formData);
        }

    });

});

function submitForm(formData) {

    $.ajax({

            type: 'POST',
            url: 'mail/mailform.php',
            data: formData,
            dataType: 'json',
            cache: false,
            timeout: 4000,
            success: function(data) {

                            $('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
                                            .html(data.msg).fadeIn('fast');

                            if ($('form #response').hasClass('success')) {
                                setTimeout("$('form #response').fadeOut('fast')", 4000);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {

                        $('form #response').removeClass().addClass('error')
                                    .html('<p>There was an <strong>' + errorThrown +
                                        '</strong> error due to an <strong>' + textStatus +
                                        '</strong> condition.</p>').fadeIn('fast');
                    },
                    complete: function(XMLHttpRequest, status) {

                        $('form')[0].reset();
                    }

          });


};


var required = ' is required.';
        var first = $('form #first').val();
        var first = $('form #first').keyup(function (event) {
        var first = $(this);
        if ($first.val() !== ''){
            $('form #response2').removeclass('response2');
        }
        });

Marlon Fowler 03 дек. 2013, в 18:26

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Wagner Leonardi · Answer 1 · 2013-12-03T15-11-00.000Z

1 - Во-первых, удалите проверку с помощью кнопки, установите ее в разделенную функцию, потому что таким образом вы можете использовать валидацию anywere, а не только щелчок на кнопке, например:

function IsValidForm() {

        e.preventDefault();

        var valid = '';
        var required = ' is required.';
        var first = $('form #first').val();
        var last = $('form #last').val();
        var email = $('form #email').val();
        var message = $('form #message').val();
        var tempt = $('form #tempt').val();
        var tempt2 = $('form #tempt2').val();

        if (first = '' || first.length <= 1) {
            valid += '<p>Your first name' + required + '</p>';
        }

        if (last = '' || last.length <= 1) {
            valid += '<p>Your last name' + required + '</p>';
        }

        if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
            valid += '<p>Your email address' + required + '</p>';
        }

        if (message = '' || message.length <= 4) {
            valid += '<p>A message' + required + '</p>';
        }

        if (tempt != 'http://') {
            valid += '<p>We can\'t allow spam bots.</p>';
        }

        if (tempt2 != '') {
            valid += '<p>A human user' + required + '</p>';
        }

        if (valid != '') {
            $('form #response').removeClass().addClass('error')
                .html('' +valid).fadeIn('fast');

            return false;
        }

        else {
          return true;
        }

}

Обратите внимание на окончание, если оно вызывает ошибку для пользователя return false; (недействительно), если все OK return true;

2 - Во-вторых, теперь вы должны установить проверку, когда пользователь вводит поля. Убедитесь, что код находится под входами проверки или находится внутри функции onRead().

$( document ).ready(function() {

    $( ".validationField" ).keydown(function() {
       //valid form when user enter data to "validationField" fields
       IsValidForm();
    });

});

добавить класс validationField в поля, которые вы хотите проверить, когда пользователь вводит, например:

<input type="text" id="email" class="validationField" />

Там есть! теперь это достигается тем, что вы хотите, вам просто нужно изменить кнопку отправки:

$('.button').click(function(e) {
    e.preventDefault();

    if(IsValidForm())
    {
         $('form #response').removeClass().addClass('processing').html('Sending...').fadeIn('fast');

        var formData = $('form').serialize();
        submitForm(formData);

    }

});

Теперь вы можете понять, что он будет действительным для формы при первом типе пользователя, верно? если вы просто хотите начать проверку сразу после первой отправки формы, вам нужно создать переменную:

var hasSubmited = false;

и в вашей форме отправьте кнопку, установите:

$('.button').click(function(e) {
    e.preventDefault();

    hasSubmited = true;
    ...

и в вашей всей IsValidForm() проверки IsValidForm() инкапсулируйте проверку проверки, если эта переменная верна, ваш простой способ:

function IsValid() {

        e.preventDefault();

        if(hasSubmited == false) return true;

        ...

теперь это будет проверяться только после отправки первой формы.