FullScreenForm验证每个输入的填充

FullScreenForm validation every input filled

本文关键字:填充 输入 验证 FullScreenForm      更新时间:2023-09-26

我想让这个表单在我的网站上工作:http://tympanus.net/Development/FullscreenForm/

我的目标是在提交时验证每个输入,并在有错误时显示错误。

为此,我已经对每个验证进行了ajax调用,以检查是否存在错误。(后端已经准备好了)

但是我遇到了两个问题:它是异步调用,所以它不会进入流,它在ajax调用完成之前进行验证。

其次,当我在数据上有错误并试图启动this._showError(error)时,它说它不是一个函数。

我怎样才能到达这个。

代码如下:

    FForm.prototype._validade = function() {
    var fld = this.fields[this.current],
        input = fld.querySelector( 'input' ) || fld.querySelector( 'textarea' ) || fld.querySelector( 'select' ),
        error,
        data = {'form_class': this.form_class, 'field': fld.querySelector('input').name, 'data': fld.querySelector('input').value};
        $(input).prop('disabled', true)
        $.ajax({
          type: "POST",
          url: '/core/validate_field',
          data: data,
          dataType:'json',
        }).done(function(data){
            if (data['status'] === 'error') {
                error = data['message'];
                this._showError( error );
                return false;
            }
            $(input).prop('disabled', false);
        }
        )
    if( error != undefined ) {
        this._showError( error );
        return false;
    }
    return true;
}
// TODO
FForm.prototype._showError = function( message ) {
    this.msgError.innerHTML = message;
    this._showCtrl( this.msgError );
}

这是回答我所做的问题的代码

    FForm.prototype._validade = function() {
    var fld = this.fields[this.current],
        input = fld.querySelector( 'input' ) || fld.querySelector( 'textarea' ) || fld.querySelector( 'select' ),
        error,
        data = {'form_class': this.form_class, 'field': fld.querySelector('input').name, 'data': fld.querySelector('input').value},
        $this = this;
        $.ajax({
          type: "POST",
          url: '/core/validate_field',
          data: data,
          dataType:'json',
        }).done(function(data){
            if (data['status'] === 'error') {
                error = data['message'];
                $this._showError( error );
                return false;
            }
            return true;
        }
        )
}

如果你有任何建议,欢迎。