October/WinterCMS表单数据请求与返回消息处理

octobercms ajax框架的消息提示

先看一段ajax实现的图片文件上传表单form的前端代码,注意如果是使用ajax请求实现文件上传一定要把“data-request-files”参数加上,其中data-request-flash表示该表单实现的是一个ajax请求;最后data-request-validate参数会根据当前form中data-validate-for参数来定位错误字段并提示,如果不用这个参数那么winterCMS会弹出一个错误提示。

另外需要注意这三个参数在form中的位置,经过测试如果顺序有错把data-request-validate放在前面它是不工作的。

<form data-request="onSave" data-request-files data-request-flash data-request-validate>
    {{ form_token() }}
    {{ form_sessionKey() }}    
    <label>Award Title</label>
    <input type="text" name="award_title">
    <span data-validate-for="award_title"></span>
    <label>Award image</label>
    <input type="file" name="awardimage">    
    <button type="submit" data-attach-loading>Save Award</button>
</form>

再看php部分,我们定义了rules验证规则,award_title这个字段必填;至少5个字符;并且在数据字段中唯一。

    public function onSave(){
        
        $validator = Validator::make(
            //Data
            [
                'award_title' => Input::get('award_title')
            ],
            //Rules
            [
                'award_title' => 'required|min:5|unique:julian_library_awards,award_title'
            ]
        );

        if($validator->fails()){
            //return Redirect::back()->withErrors($validator);  //Normal Request
            //Flash::error($validator); //AJAX request custom error message
            throw new ValidationException($validator);    //AJAX request system error message
        }else{
            $award = new Award();
            $award->award_title = Input::get('award_title');
            $award->slug = str_slug(Input::get('award_title'));
            $award->awardimage = Input::file('awardimage');
            $award->save();
            Flash::success('Award added!'); 
        }


    }
}

常规请求的消息捕捉

错误信息

那么常规的非ajax请求验证错误后通常是这样返回

 return Redirect::back()->withErrors($validator);

精确捕捉错误(在相应的form表单位置中填写)

{{ errors.first('award_title') }}

全部错误

    {% for error in errors.all() %}
    <p>{{ error }}</p>
    {% endfor %}      

需要说明的是经过我的测试如果Rules[]在component内部和Model中都进行了配置,Model中的消息是不能被捕捉到的,所以这里建议把rules尽量在component中配置好或覆盖model中的rule

成功信息

如果验证成功并执行完成后我们可以使用

Flash::success('Award added!'); 

在前端可以使用 {% flash success %}来捕获信息

    {% flash success %}
    <p>{{ message }}</p>
    {% endflash %} 

或者也可以直接返回,忽略消息

Redirect::back()

Ajax请求消息捕捉

错误消息

october cms系统内置的Ajax框架错误提示

使用自定义的错误信息

if($validator->fails()){
	Flash::error("Custom error message!"); //AJAX request custom error message
}

使用系统捕捉的错误信息

throw new ValidationException($validator);

如果form中设置了data-request-validate,则错误不再使用october cms的ajax框架弹出提示,而是根据具体data-validate-for来定位错误。

如果不用data-validate-for则所有错误信息都会使用内置的ajax框架弹出信息,这其实对用户来说不是很友好,个人还是觉得需要表单定位具体错误的更友好。

成功消息

通过Flash弹出消息

Flash::success('Award added!');

如果非ajax请求(form中没有data-request-flash参数)则需要使用{% flash success %}来获得,上文已经说明。

Post Comment