Поля ввода формы очищаются, включая значение отправки - PullRequest
0 голосов
/ 06 июня 2018

Я работаю с валидациями форм. Я хочу очистить поля после отправки формы, но она нормально работает, но <input type="submit" value="submit"> также понятна, но я хочу, чтобы очищались только поля ввода.я пробовал с reset(); также, но без добавления reset (). В моих полях кода очищается Вот что я делаю неправильно.Кто-нибудь может подсказать, как мне решить эту проблему?

Перед отправкой формы enter image description here

После отправки формы enter image description here

var Validator = function(formObject) {
    this.form = $(formObject);
   var Elements = {
        text: {
            reg: /^[a-zA-Z]{2,20}$/,
            require : true,
            error: "Not a valid name.",
        },

        email: {
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
            error: "Not a valid e-mail address.",
        },
        phone: {
            reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
            error: "Not a valid number.",
        },

        message: {
            reg: /^(?!\s*$).+/,
            error: "Message field cannot be empty.",
        },
        gender: {
          error: "gender is required",
        },
        selectOption: {
          error: "this field is required",
          required: true
      }
    };

    var handleError = function(element, message) {
        element.addClass('input-error');
        var $err_msg = element.parent('div');
        $err_msg.find('.error').remove();

        var error = $('<div class="error"></div>').text(message);
        error.appendTo($err_msg);
        console.log(element);


      element.on('keypress change', function() {
            $(error).fadeOut(1000, function() {
            console.log(element);
            element.removeClass('input-error');
            });
        });

    };

    this.validate = function() {
      var errorCount = 0;

      this.form.find("select").each(function(index, field){
         var type = $(field).data("validation");
            var validation = Elements[type];
          if($(field).val() == "") {
            errorCount++;                       
            handleError($(field), validation.error);
          }
      });

        this.form.find("input, textarea").each(function(index, field){
            var type = $(field).data("validation");
            var validation = Elements[type];
            if(validation !== undefined) {            
             var re = new RegExp(validation.reg);                
             if (validation){                   
                 if (!re.test($(field).val())){ 
                    errorCount++;                       
                    handleError($(field), validation.error);                    
                }
             }
         }
        })


    var radioList = $('input:radio');
    var radioNameList = new Array();
    var radioUniqueNameList = new Array();
    var notCompleted = 0;
    for(var i=0; i< radioList.length; i++){
      radioNameList.push(radioList[i].name);
    }
    radioUniqueNameList = jQuery.unique( radioNameList );
    console.log(radioUniqueNameList);
    for(var i=0; i< radioUniqueNameList.length; i++){
        var field = $('#' + radioUniqueNameList[i]);
        var type = field.data("validation");
           var validation = Elements[type];
        if($('input[name='+type+']:checked', '#test').val() == undefined) {
            errorCount++;   
            handleError($(field), validation.error);
        }
    }

    return errorCount == 0;
    };
};

$(function(){

    $('form#test').on('submit', function (e) {
      var NoErrors =  new Validator(this).validate();
     if(NoErrors == true) {
         $.ajax({
             url: this.action,
             type: this.method,
             data: $(this).serialize(),
             success: function() {
                 // AJAX request finished, handle the results and error msg
                $('.success_msg').fadeIn().delay(3000).fadeOut();         
                $('input , textarea').val('').removeClass('error');

             }
         });

     }
        return false;
    })

Ответы [ 3 ]

0 голосов
/ 06 июня 2018

Редактировать: Судя по отредактированному вопросу, предоставлению наглядного материала и просмотру вашего кода, вы могли ошибочно нацелить свои кнопки.В вашем коде вы сбрасываете каждый элемент ввода.Некоторые CSS-фреймворки используют элемент <input> с определенным type и или class для создания кнопки.


Простой способ очистить поля ввода с помощью jQuery - просто установитьзначение в пустую строку.Примеры:

Сброс, идентификатор таргетинга

$("input#someField").val("");

Сброс, название таргетинга

$("input[name=someName]").val("");

Сбросс таргетингом на класс

$(".someClass").val("");

Ориентируясь на определенные элементы, вы убедитесь, что то, что вы хотите сбросить, станет сбросом и ничего больше.

Примеры с флажками:

Сброс флажка, идентификатор таргетинга

$("#idOfCheckbox").attr('checked', false);

Сброс флажка, название таргетинга

$("checkbox[name=nameOfCheckbox]").attr('checked', false);

Сброс флажка,класс таргетинга

$(".classOfCheckbox").attr('checked', false);

Та же логика выполняется с большинством элементов.

0 голосов
/ 06 июня 2018

Вы можете поместить класс для ввода ввода и затем использовать

  $("input:not(.uniqueClass) , textArea")
0 голосов
/ 06 июня 2018

Попробуйте что-то подобное, основываясь на элементах ввода вашей формы:

$('input[type="text"], textarea').val('');

Кредит & Ссылки: Очистка ввода моей формы после отправки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...