Question

我使用表单验证我希望在提交表单后清除字段工作正常但<input type="submit" value="submit">也很清楚，但我想只清除输入字段。我也尝试了reset();但没有添加reset（）。在我的代码字段中清除了我在做错了。有谁能建议我如何解决这个问题？

在提交表格之前

提交表格后

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;
    })

Answer 1

编辑：根据您编辑的问题判断，提供视觉效果并查看您的代码，您可能会错误地定位了您的按钮。在您的代码中，您正在重置每个输入元素。一些CSS框架使用<input>元素和某个type，或者使用class来创建按钮。

使用jQuery清除输入字段的简单方法是将值设置为空字符串。例子：

重置，定位ID

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

重置，定位名称

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

重置，定位课程

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

通过定位特定元素，您可以确保要重置的内容，重置内容以及其他内容。

复选框示例：

重置复选框，定位ID

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

重置复选框，定位名称

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

重置复选框，定位课程

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

大多数元素都遵循相同的逻辑。

Answer 2

根据表单输入元素尝试这样的事情：

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

信用与优惠参考文献：Clearing my form inputs after submission

Answer 3

您可以在输入提交上放置一个类，然后使用

  $("input:not(.uniqueClass) , textArea")

表单输入字段已清除，包括提交值

3 个答案: